移动端布局、手机屏幕尺寸(rem,vw,vh)及分辨率
移动端
pm 移动端页面布局
弹性布局(100%布局)——拉钩?、天猫首页
弹性布局（100%布局）的特点：
顶部与底部的bar不管分辨率怎么变，它的?度和位置都不变； 中间每条招聘信息不管分
辨率怎么变，招聘公司的图标等信息 都位于条目的左边，薪资都位于右边.
等比缩放布局(rem布局)—网易、淘宝首页
什么是屏幕尺寸？
移动端屏幕尺寸:屏幕对角线的长度，单位是英寸(1英寸=2.54厘米)。
常见的尺寸有：2.4，2.8，3.5，3.7，4.2，5.0，5.5，6.0
什么是屏幕分辨率？
屏幕分辨率：指横纵方向上亩皮的像素点数，单位为px,1px=1个像素点。
一哗或般以纵向像素*横向像素表示 一个手机的屏幕分辨率。如：1960*1080
这里的一个像素是指物理设备的一个像素点。
什么是屏幕像素密度？
屏幕像素密度：屏幕上每英寸可以显示像素点的数量，单位是ppi(pixels per inch)缩
写。
iphone3GS和iphone4区别：屏幕尺寸一样，屏幕分辨率相差一倍，屏幕像素密度也相差一倍数。
PX:像素，将显示器分成非常细小的方格，每一个方格就是1px。
注:(网页重构中使用的px 和屏幕分辨率的px不一定是一样的大小)。
实际上像素分为两种：设备像素和逻辑像素（ CSS像素）
DPR：设备像素比DPR(devicePixelRa嫧o)是默认缩放为100%的情况下，设备像素和CSS像素的
比值
在早先的移动设备中，并没有DPR的概念。随着技术的发展，移动设备的屏幕像素密度越来
越高。从iphone4开始苹果公司推出了所谓的re嫧na视网膜屏幕。之所以叫做视网膜屏幕，是
因为屏幕的PPI(屏幕像素密度)太高，人的视网膜无法分辨出屏幕上的像素点。iphone4的分
辨率提高了一倍，但屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素多了一倍，于
是DPR = 2
1.rem是什么?
rem(font size of the root element)是指相对于根元素的字体大小的单位。
2.为什么web app要使用rem？
实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏
幕,根据变化html的字体大小来控制rem的大小,
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。
vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，
Android browser4.4+支持，chrome for android39支持
1.rem
rem是指相对于根元素的字体大小的单位。
2.根元素
如果根元素是相对设备尺寸自动变换。
3.VW
视窗宽度，1vw等于视窗宽度的1%。
4.VW转换成PX赋值给font‐size
例：设备的分辨率为640*1136，逻辑像素为320*568 1VW=3.2px
Font-size:100px;转换成VW font‐size:31.25vw;
1rem=31.25vw可一起结合写等比例缩放布局。
1.px
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
2.em
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被
人为设置，则相对于浏览器的默认字体尺寸。
3.rem
rem是指相对于根元素的乱耐伍字体大小的单位。
4.VW
视窗宽度，1vw等于视窗宽度的1%。
前端分辨率适配
现在手机屏大小不一，而且屏幕硬件性能也各不相同，一般的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);
})();
HTML页面是如何适应不同分辨率的显示器
HTML页面何适应不同分辨率的显示器可以通过：响应式布局、自适应网页设计等方法：
1、响应式布局设计：
响应式布局可以为不同链告蚂终端的用户提供更加舒适的界面和更好的用户体验，响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。
2、自适应网页设计：
自适应网页设计（AdaptiveWebDesign）指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。
扩展资料：
响应式布局与棚埋自适应布局的区别：
1、自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。
2、自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。
3、自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局是一友源套页面全部适应。
4、自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念，它可以自动识别屏幕宽度并做出相应调整的网页设计。
参考资料来源：百度百科-响应式布局
参考资料来源：百度百科-自适应网页设计
web前端主要需要适应多大分辨率
现哗尺在的显示器主要是1920*1200的分辨率，但也有一些笔记本用的1280*800等，还有就是一些4k显示器也是存乱尺高在的。所以看你采用固定布局还是自适应布局，固定布局的话，建议不超过1200px，自适应布局的话可以看看bootsrap这个前端框架。至困乎于手机开发，有很多专门的框架的，比如bootstrap、jQuery mobile等
本人新手，判断不同分辨率显示不同宽度布局实现自适应宽度！
这个可以通过布局和样式解决：
方法一：所有布局用百分比布局，这种方法是比较传统的岩烂。
方法二：百分比和em（一个字符的单位）相结合的；
方法三：rem为单位来写样式，需要借助JS来根据分辨率的大小调整rem;
方法四：布局用rem单位，而字体用em.
第1、2两种方法是比较传统，网上随便搜搜就找得到了旅枣缓；第3种开始用到的rem，rem是css3新出的一种样式属性单位，类似PX；但是rem是可以人为设置大小的，也就是说rem这个单位的大小是可以设置,基于这个特性，再通过JS来根据分辨率控制这个rem的单位大小；
JS代码：
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 40 * (clientWidth / 1080) + 'px';
console.log(40 * (clientWidth / 1080))
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
这边的40是rem的自己需要单位大小（自己根据需求设置的，如果需要甚至可拆模以改成10）；
这边的1080是设计效果图的大小，如果设计图是以宽度为2000的话，那么这边的1080就改成2000；
而em用来做字体单位的话，就可以根据不同的显示器（手机自身的设定）来显示字体，不会出现字体大的离谱，或者小的看不见的状况；
不过rem因为是CSS3的属性，在PC端的兼容性很差，不建议使用，但是移动端是非常适合的，总结就是PC端：方法一、方法二，移动端：方法三、方法四
HTML5如何利用rem实现自适应布局
分析袭指设计图
假设设计图大小为1080px。这也就意燃慧味着，在开发时，需要兼容的最大分辨率为1080px，最小的为320px。
2. 调整视口
代码实例：
!DOCTYPE html
head
meta charset="UTF-8" /
title布局之路-移动端开发实例/title
meta name="viewport"皮禅答 content="width=device-width,user-scalable = no" /
link rel="stylesheet" type="text/css" href="css/reset.css" /
/head
body
div class="wrap"/div
/body
/html
代码解析：由于使用不同设备打开网页时，宽度均有所不同，所以不能讲视口设置为固定值，应当为width=device-width,即将视口设置为当前设备的宽度。
3. 确定设计图的最小字体
浏览器（部分）能够显示的最小字体未12px，当移动端页面宽度为320px时，要保证最小字体为12px，那么在1080px的设计图中，最小字体应当为42px。
代码实例：
style type="text/css"
html {
font-size: 42px;
}
/style
4. 按照设计图的像素进行开发
按照正常网页开发流程，进行网页开发即可。
5. 使用百分比和rem替换px
代码效果对比：
/*使用固定像素*/
.box {
float: left;
width: 658px;
font-size: 72px;
text-align: center;
line-height: 195px;
}
/*使用百分比和rem*/
.box {
float: left;
width: 60.93%;
font-size: 1.71rem;
text-align: center;
line-height: 4.64rem;
}
代码解析：
水平方向的值，将具体像素调整为百分比。百分比的计算是根据父级的内容区宽度进行计算的。
例如，父级宽度为1080px， 子级元素为197px，那么子元素转换为百分比为：197/1080*100%=18.24%。需要注意的是百分比根据父级计算，当标签结构级别不同时，计算公式中的“分母”也有所不同，在开发时这个地方很容易出现问题，请务必注意。
垂直方向的值，将具体像素调整为rem，与水平方向相比，垂直方向的计算就比较简单。例如，行高为195px，HTML标签当前的字体大小为42px，将行高转换为rem单位，即195/42= 4. 64rem。