Ⅰ 前端发展方向 职业规划
端的发展前景是很明朗并且是非常具有潜力的，端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。主要发展前景从以下几个方面说明：
近几年各类互联网应用产品层出不群，Web前端开发工程师作为实现前端展示的重要一步也越来越受到了企业的青睐，招聘需求呈现递增趋势，从前程无忧招聘数据可以看出，Web前端相关岗位24小时之内需求量高达4W+。
从就业方向来看，Web前端工程师所能选择的就业岗位也是非常对样的，网页制作、H5开发、小程序开发、小游戏开发、APP开发等都是可以去选择的，所以Web前端就业前景还是非常可观的。
Web前端岗位空缺大，供不应求，那么薪资待遇同样呈现不断上涨趋势，从第三方统计平台职友集中可以看到北京web前端工程师平均工资：¥ 17280/月，按工作经验统计，其中应届生工资¥12920，，3-5年工资¥18030，5-10年工资¥23440。从以上数据不难看出，Web前端就业薪资普遍高于其他行业。
亲爱的小伙伴，前端技术大家庭欢迎你的到来：https://sourl.cn/7jnzJp。在这里，不仅有志同道合的朋友，指导人生的老师，更有看不完的技术教程随你挑！心动吗？想学吗？那就动动你的小手手，加入我们吧！
Ⅱ 前后端分离，前后端工作量比例大概多少
一般前端的工作时间会是后端 2 倍左右，后端纯数据好写，前端要调整 UI 的效果等很花时间
Ⅲ Web前端开发工资一般是多少
一 前端开发很有前途，是一项不会被淘汰的技术。
Web前端开发是一项很特殊的工作，是所有开发人员中最接近用户的。最应该从用户的角度出发，去站在用户的位置上去想，去琢磨开发新的东西。与后端开发不同，前端开发领域涉及的技术全面，用到的技术也很多，而且要做到与时俱进，这就要求前端工程师们时刻关注新技术发展得趋势。前端开发会随着网络时代的发展，被更多的人所熟悉，也会挖掘出更多的前端开发的人才，为我们在以后工作的道路上多一条路选择。
二 前端不仅仅有前途，也有钱途，但是一定要加强学习奥，与时俱进。
这里引用我的偶像"的一句话，现在的前端开发完全可以这样说"因为我们还年轻"，是的，前端开发最近几年开慢慢被大家所熟知，因此，个人认为前端开发不仅有前途，更有钱途。前端开发入门容易，但随着学习的深入，后面每前进一步都要付出很大的前端要学好必须每天坚持学习。为了方便大家的交流学习，也是创建了一个群每天都有分享学习方法和专业老师直播前端课程，这个扣裙首先是132 中间是667 最后是127 前端学习零基础想要学习的同学欢迎加入，如果只是凑热闹就不要来了!!!努力。前面的div+css很容易让我们踏进前端的大门，但是越往后学，需要掌握的东西会越多，它需要很广的知识面来填充自己。
说明：南京前端开发平均工资：6K/月，以上图表显示：最低工资2K-3K，最高工资20K-30K。
四 要想快速掌握一门新技术，首先有两个先决条件。
（1）首先思想要主动求变，敢于跳出的自己的舒适区，对任何技术都抱有开放的心态。贪图安稳是人的本性。而这种本性往往会阻碍你的发展。人所能了解的知识的多少，取决于自己的舒适区有多大，舒适区越大，与外界接壤的范围越大，就越感觉自己的无知。程序员至少要做到两点，不要对自己不了解的技术心存偏见，不要对自己不熟悉的技术心存恐惧。
（2）要化被动式学习为主动式学习。在中国很大一批前端程序员每天都是在被动式学习。什么是被动式学习？就是被人、事逼着去学习。今天新启动一个项目，技术调研不想采用新的技术，开发过程中碰到难题才会去查资料，整天就是把别人的、自已以前写的代码复制重用，复制以后出问题了也要花好长时间解决。主动式学习需要你未雨绸缪，不能临时抱佛脚。而且要把学习看做是对自己的积累和提高，看成是对自己的长期投资，不能抱有太强的功利性。
五 最后快速总结。重要的事情说三遍。
1.主动学习很重要，主动学习很重要，主动学习很重要。
2.官方文档很重要，官方文档很重要，官方文档很重要。
3.实践很重要，实践很重要，实践很重要。
Ⅳ 手机前端页面尺寸
iPhone4/iPhone4s 320 * 372 / 320 * 441 (已隐藏URL与状态栏)
iPhone5/iPhone5s 320 * 460 / 320 * 529 (已隐藏URL与状态栏)
Note2 360 * 567 (未隐藏URL与状态栏)
iPad 3/4 768*928 (未隐藏URL与状态栏)
GALAXY SIII 360 * 567 (未隐藏URL与状态栏)
小米2A 360 *567 (未隐藏URL与状态栏)
HTC G10 320 * 460
<meta name="viewport"
网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
width - viewport的宽度 height -
viewport的高度
initial-scale - 初始的缩放比例
minimum-scale -
允许用户缩放到的最小比例
maximum-scale -
允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
参考：
一、网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。
<meta name="viewport"
content="width=device-width,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,
user-scalable=no">
其中： width - viewport的宽度 height - viewport的高度 initial-scale -
初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例
user-scalable -
用户是否可以手动缩放c
二、关于meta的详细介绍请参考
三、下文是关于Meta的例子的详细介绍 原文地址
3. Meta元素可视区
默认情况下，iPhone上的Safari会象在大屏幕的
桌面浏览器那样显示你的页面，宽度达到了980像素，然后缩小内容以适应iPhone的小屏幕，因此用户在iPhone看这个页面时感觉字体就比较小了，
也比较模糊，必须要放大才能看得真切，对于一个普通的Web页面似乎可以接受，但对于一个常用的应用程序就没几个人能够受得了。
幸运的是可以使用特殊的Meta元素可视区进行纠正：
<meta
name="viewport" content="width=device-width"/>
这个元素通知浏览器使用设备的宽度作为可视区的宽度，而不是默认的980像素了，我们可以看看两个不同的例子。
例3(链接：
viewport.html)显示了一个简单的段落元素，没有Meta元素可视区，字体有点模糊。在iPhone中运行的实际情况如下图所示。
图 1 无可视区的显示效果
例4(链接：
/viewport.html)包括了一个可视区元素，现在设备宽度只有320像素，字体也比前一个例子更清晰了。在iPhone中运行的实际情况如下图
所示。
图 2 有可视区的显示效果
另外，你还可以手动设置device-width的值，例如，假设你的博客页面的宽度是750像素，那么桌面屏幕最佳大小就是800x600像素，例
5(链接：
/fixed750.html)显示了一个删减版本，如果你在iPhone中浏览它，你会看到980像素剩下的空间都填充了白色。
为了消除额外的空间，可以使用meta元素可视区将宽度设为780像素：
<meta
name="viewport" content="width=780"/>
例6(链接：/fixed750-viewport.html)显示了meta元素可视区布局被固定后的效果。
Meta元素可视区的内容可以包括多个逗号分隔的值，如initial-scale –
用户最初看到页面时的放大级别，对于Web应用程序，一个常见的设置是：
<meta
name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
这个元素设置宽度为设备的最大宽度，禁止用户放大和缩小
Ⅳ web前端开发，移动端页面显示问题，缩放比例问题
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
网络来的，我觉得应该能解决你的问题
Ⅵ 如何把web前端网页做成自适应
1.首先，在网页代码的头部，加入一行viewport元标签。
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9，对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
2、不使用绝对宽度由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，CSS代码不能指定像素宽度：width:xxx px;
只能指定百分比宽度：width: xx%;或者width:auto;
3、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1 {
font-size: 1.5em;
}
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
small {
font-size: 0.875em;
}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
Ⅶ web前端 移动端和pc端显示比例一般都要怎么调整
响应式
Ⅷ web产品的前端工程师在整个开发团队中，人员比例多少合适
现在我国web前端开发人员缺口大,一般前后端开发人员比例是1:1左右。
Ⅸ web前端工资现在多少左右
据统计，国外的前端开发人员和后端开发人员比例约为1:1，但是国内比例却在1:3以下，web前端开发职位的人才缺口巨大。
根据网上统计数据,上海Web前端开发工程师这一职位的月平均收入为1.5万元，工作经验达到3年的web前端工程师甚至达到3万元。
而且Web前端工程师一般工作1年左右,年薪一般就都能有15W,工作5年以上的通常能成为互联网公司技术总监或产品经理,年薪达到25W左右。
如果你想要学好web前端最好加入一个好的学习环境，可以来这个Q群，首先是132，中间是667，最后是127，这样大家学习的话就比较方便，还能够共同交流和分享资料
web前端就业薪资
我们先用三个数据了解一下。
web前端在北京地区的薪资：
北京前端开发工程师平均工资：¥ 18690/月，取自 23348 份样本。
web前端从2010年起，平均薪资都在大幅提升，并且在2018年达到最高点，至月薪20K左右。在2019年虽然稍有下降，但是依然很高，超过18000元。
各阶段web前端工程师的薪资范围
当然也只是一个范围，仅供参考：
1、切图熟练、能写一些JS效果(HTML+CSS+jQuery):月收入5k～1w
2、会切图会JS,并可以熟练用JS开发各种组件:月收入8K～1.5w
3、具备前两条件,熟悉几个个后端语言:月收入1.5w～3w
4、具备以上所有条件,并对前端架构、性能优化方面有深入了解:月收入平均4w,并且企业抢着要!（毕竟现在人才缺口，而且越顶尖的人才越稀缺）
Ⅹ 前端分辨率适配
现在手机屏大小不一，而且屏幕硬件性能也各不相同，一般的UI设计都是基于特定机型画设计搞件的，常见的是基于iPhone6的分辨率设计2倍图，以iPhone6为例，屏幕物理像素宽度是750，网页宽度为375PX。开发中还要根据不同手机留出设计余量，因为不同分辨率的手机显示时会有拉伸位移。
网上也有一些方案，处理高清屏适配方案，但一般也只把DPR适配到2，彩用所有长度单位放大2位，网页整体缩放50%的的做法，比如ant-mobile就支持这种方式，它可以定义一个less常量“@hd”来定义CSS中使用的基础单位大小，但是这种方式在遇到网页实际宽度大于375的设备时，还是不能1：1的还源UI设计稿。
我个人在项目中采用的是更复杂的实现方式，可以实现适配DPR大于2的手机屏，并接近100%的还源UI设计稿。具体的适配技术各家大同小异，这里不再细说，我只给出我自己的适配方案。
同大多数适配方法一样，通过 rem 设计一个基础的大小单位 ，做为整个页面的基础单位，再根据屏幕物理DPR结合屏宽计算这个单位的大小，
基础单位 = 屏幕DPR * 网页宽度 / 375（设计稿基准为375）
网页缩放值 = 1 / 屏幕DPR
比如我的方案是把rem设为10px 再乘以“基础单位”，这样在设置一个设计稿上14号字的时候，就写 1.4rem就可以了。另外编写页面布局时，也用这个计算出来的相对单位，这样可以做到不管什么样的屏幕，UI设计搞都不会因宽度变化而变形。另外，如果使用ant-mobile这样的支持高清方案的UI中间件，直接在配置中把它的LESS常量 “@hd”设置 为 “0.1rem”就可以了。
另外还有一个小的福利，就是在这个方案下，当你想画出“1物理像素”的细边框时，直接用 “1px”，就可以了，因为在这个方案下，1px对应的是一个物理像素。
下面给出我实践中使用的适配代码：(这是直接放在HTML文件中的版本）
//计算屏幕比例并设置html的font-size
/**
将html字号设置为10个设计像素（一个基准系数，即rem为10 设计稿像素）
设计一个缩放系数，以应对可能出现的适配高清屏要求
*/
( function () {
/**初始化方法
* _standard 设计稿对应的分辨率
* base_DPR 设定最小DPR值
*/
function setInitialRem( _standard, base_DPR) {
//取得当前设备DPR
var dpr = window. devicePixelRatio || 1;
//如果设定了默认最小DPR值
if ( base_DPR) {
dpr = dpr >= base_DPR ? dpr : base_DPR;
}
//设定缩放视图比例
var scale = 1 / dpr;
//设直视图缩放比例
document. head. querySelector( 'meta[name="viewport"]'). content = "width=device-width,initial-scale=" + scale + ",minimum-scale=" + scale + ",maximum-scale=" + scale + ",user-scalable=no, shrink-to-fit=no";
//取得当前设备宽度
var device_width = document. documentElement. clientWidth; //window.innerWidth;
//标定原稿设计基准值 当前稿件设计宽度为 iPhone6/6s 375像素
var standard_width = _standard * dpr;
//设定基准单位
var base_value = 10;
//基准系数=设备宽度➗稿件基准宽度✖️设备DPR✖️10
var rem = device_width / standard_width * dpr * base_value;
//设置 REM
document. documentElement. style. fontSize = rem + "px";
}
window. addEventListener( "resize", function () { setInitialRem( 375, 1); });
setInitialRem( 375, 1);
})();