在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
本人是移动web app的菜鸟，拿到psd之前进行切图，切图标准是什么。
可以的话，大概讲讲移动web开发需要注意的东西。
我也不知道我问得对不对啊。。。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这个我来回答下好了。
一般移动端web页面的设计规范是 640px 宽的 psd 设计稿， 因为现在主流的手机分辨率都是640 如iphone
当然这个是设计规范。
你在做web页面的时候。
一般的做法是设置 html 页面的 viewport 信息为 device-width。
&meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
这个时候会有一个很有意思的情况就是 web中的你获取document 宽度的时候它是显示320(如iphone)。
也就是说你做的所有东西尺寸都是设计稿的一半尺寸就可以了。
一些背景图设置，要设置bacground-size 如果你懂css的话。
bacground-size: 50% auto(你图片的一般宽)
另外适应不同宽度屏幕，你的页面最好是做自适应宽度的布局。
其他没了，可以多参考一些大站移动端页面。
最后一句：作为程序员，要养成习惯，不懂先搜索，多看别人的代码，再思考，最后再提问。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
网页从开始到现在，它的目的一直就是为了展示文档，它关系的不是平面设计，而是排版，这一点要和设计师沟通好。
网页设计中要考虑到哪些元素是固定宽度的，哪些是元素是可变宽度的。
比如google的首页，最上面一条“硬又黑”，两边的文字区域是固定宽度的，中间黑色空白是可变宽度的。
中间区域，logo和搜索框是固定宽度且剧中的，左右留白。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。千图网提供精美好看的移动界面设计效果图免费下载，本次移动界面设计效果图是有关App设计效果图，主题是webapp版式设计，编号是，格式是psd，建议使用Photoshop CC 2017 软件打开，该App设计效果图大小是3.715 MB，尺寸为480x848。
webapp版式设计是由移动界面效果图设计师VKeyson上传.
浏览本次作品的您可能还对&& web网站&&& 白色感兴趣。登录查看更多精彩内容文件格式：psd版本：Photoshop CC 2017编号：尺寸：480×848像素模式：RGB体积：3.715 MB
肖像权/物权：未获得模特肖像权或所有物权授权版权所有：此作品系用户共享，仅供学习交流。禁止商业使用。关注关注您可能在找这些：购物APP 发现UI界面设计版式banner 海报 版式webapp 用户信息界面UI素材版式设计精美UI网页模板版式精美UI网页模板设计版式精美UI界面设计版式精美UI界面版式制作举报成功！ 3秒后自动关闭请说明举报理由源文件为合层文件素材重复/网站已存在同样内容格式不符/错误压缩包出错/解压失败文件损坏/文件空白/打不开预览图与源文件不符倒计时结束时无下载/网页丢失/404报错盗版/侵权收藏成功!
亲爱的用户，系统检测到您的帐号存在被盗风险为了您的帐号安全请绑定手机号码中国+86温馨提示：绑定手机号后可使用手机号验证码进行登录
登录千图网
或中国+86该帐号还未注册，该帐号还未注册，勾选代表你同意&
添加到收藏夹
正在加载中...&
您还未创建收藏夹，点击创建增加新收藏夹吧！
您创建的收藏会显示在此处
创建到收藏夹
QQ客服: 工作日：9:00 - 22:00节假日：9:00 - 18:00电话客服: 400-9987011工作日：9:30 - 18:30反馈时告知客服这串数字哦微信扫码领取大礼包移动端Web页面适配方案
&meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"&
移动端Web页面，即常说的H5页面、手机页面、webview页面等。
手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑在安卓/IOS的各种尺寸设备上的兼容，这里总结的是针对移动端设备的页面，设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备。
引用一文章的描述：
在不同尺寸的手机设备上，页面“相对性的达到合理的展示（自适应）”或者“保持统一效果的等比缩放（看起来差不多）”。
在做适配之前，需要先理解一些概念。对于不理解的地方，可以搜索更多文章看看，本文总结的也是摘抄了其他文章的描述，本文末有附相关链接。
viewport是严格的等于浏览器的窗口。viewport与跟viewport有关的meta标签的关系，详细建议读一读这篇文章：，viewport与布局的关系，可以看下这篇文章：
visual viewport 可见视口
屏幕宽度layout viewport 布局视口 DOM宽度ideal viewport 理想适口：使布局视口就是可见视口
设备宽度(visual viewport)与DOM宽度(layout
viewport), scale的关系为：
（visual viewport）= （layout viewport）* scale获取屏幕宽度(visual viewport)的尺寸：window.
innerWidth/Height。
获取DOM宽度(layout viewport)的尺寸：document.
documentElement. clientWidth/Height。
设置理想视口：把默认的layout viewport的宽度设为移动设备的屏幕宽度，得到理想视口(ideal
viewport):
&meta name="viewport" content="width=device-width,initial-scale=1"&
物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。关于这个概念，看一张"田"字示意图就会清晰了。
CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。CSS像素顾名思义就是我们写CSS时所用的像素。
设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：
设备像素比 ＝ 物理像素 / 设备独立像素
在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。通常所说的二倍屏(retina)的dpr是2, 三倍屏是3。
viewport中的scale和dpr是倒数关系。
获取当前设备的dpr：
JavaScript: window.devicePixelRatio。CSS: -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio,
-webkit-max-device-pixel-ratio。不同dpr的设备，可根据此做一些样式适配(这里只针对webkit内核的浏览器和webview)。
dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。
安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级。规定以160dpi为基准，1dp=1px。如果密度是320dpi，则1dp=2px，以此类推。
IOS设备：从IPhone4开始为Retina屏
CSS像素与设备独立像素之间的关系依赖于当前的缩放等级。
屏幕像素密度是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算(PPI)。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。
屏幕密度 = 对角线分辨率/屏幕尺寸
屏幕尺寸、屏幕分辨率--&对角线分辨率/屏幕尺寸--&屏幕像素密度PPI
设备像素比dpr = 物理像素 / 设备独立像素dip(dp)
viewport: scale
下面大致列下前端在实现适配上常采用的方式。百分比、em单位的使用就不必说了。
设置理想视口
&meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"&
设置理想视口，使得DOM宽度(layout viewport)与屏幕宽度(visual viewport)一样大,DOM文档主宽度即为屏幕宽度。1个CSS像素(1px)由多少设备像素显示由具体设备而不同。
动态设置视口缩放为1/dpr
对于安卓，所有设备缩放设为1,对于IOS，根据dpr不同，设置其缩放为dpr倒数。设置页面缩放可以使得1个CSS像素(1px)由1个设备像素来显示，从而提高显示精度；因此，设置1/dpr的缩放视口，可以画出1px的边框。
不管页面中有没有设置viewport，若无，则设置，若有，则改写，设置其scale为1/dpr。
(function (doc, win) {
var docEl = win.document.documentE
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
var metaEl = doc.querySelector('meta[name="viewport"]');
var dpr = 0;
var scale = 0;
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/[iphone|ipad]/gi);
var devicePixelRatio = win.devicePixelR
if(isIPhone) {
dpr = devicePixelR
scale = 1 /
docEl.setAttribute('data-dpr', dpr);
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
document.documentElement.firstElementChild.appendChild(metaEl);
metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
})(document, window);
px单位的适配
设置动态缩放视口后，在iPhone6上，缩放为0.5，即CSS像素2px最终显示效果为1px，而在scale=1的设备，CSS像素1px显示效果为1px，那么，为了达到显示效果一致，以px为单位的元素(比如字体大小)，其样式应有适配不同dpr的版本，因此，在动态设置viewport:
scale的时候，同时在html根元素上加上data-dpr=[dpr]，但是这种方式还是不够，如果dpr为2，3之外的其他数值，px就没办法适配到。因此我会选择都用rem为单位进行适配。
样式示例：
font-size: 14px;
[data-dpr="2"] & {
font-size: 14px * 2;
[data-dpr="3"] & {
font-size: 14px * 3;
为写样式方便，可以借助sass的mixin写代码片段：
@mixin font-dpr($font-size){
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
[data-dpr="3"] & {
font-size: $font-size * 3;
@mixin px-dpr($property, $px) {
#{$property}: $px;
[data-dpr="2"] & {
#{$property}: $px * 2;
[data-dpr="3"] & {
#{$property}: $px * 3;
@include font-dpr(14px);
@include px-dpr(width, 40px); @include px-dpr(height, 40px);
设置缩放视口与设置理想视口有什么不同
问题：viewport设为理想视口(scale=1)，基本已经满足适配，为什么要动态设置viewport缩放?
原因：iPhone6为例，dpr为2，缩放设为0.5，则DOM宽度为750，缩放后显示刚好为屏幕宽度375，而总的CSS像素其实是750，与设备像素一致，这样1px的CSS像素，占用的物理像素也是1；而viewport设置缩放为1的理想视口情况下，DOM宽度为375，显示也刚好是屏幕宽度，然而1px的CSS像素，占用的物理像素是2。这样说来，这样设置可以实现1px的线条在二倍屏的显示。因为： CSS像素与设备像素的关系依赖于屏幕缩放。
验证：设备：iPhone6,
在scale=0.5时，1px边框显示效果;
在scale=1.0时，1px边框显示效果;
在scale=0.5时，2px边框显示效果;
通过对比后发现，在scale=0.5时，1px的线比scale=1.0要细，这也就解决了1px线条的显示问题。
定义：font size of the root element.
这个单位的定义和em类似，不同的是em是相对于父元素，而rem是相对于根元素。rem定义是根元素的font-size, 以rem为单位，其数值与px的关系，需相对于根元素&html&的font-size计算，比如，设置根元素font-size=16px, 则表示1rem=16px。关于rem更多的解读，建议可以阅读本文末附的腾讯一团队的文章《web app变革之rem》。
根据这个特点，可以根据设备宽度动态设置根元素的font-size，使得以rem为单位的元素在不同终端上以相对一致的视觉效果呈现。
选取一个设备宽度作为基准，设置其根元素大小，其他设备根据此比例计算其根元素大小。比如使得iPhone6根元素font-size=16px。
根元素font-size/px
js计算所得
js计算所得
js计算所得
根元素fontSize公式：width/fontSize
= baseWidth/baseFontSize
其中，baseWidth, baseFontSize是选为基准的设备宽度及其根元素大小，width,
fontSize为所求设备的宽度及其根元素大小
动态设置根元素fontSize
(function (doc, win) {
var docEl = win.document.documentE
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
var refreshRem = function () {
var clientWidth = win.innerWidth
|| doc.documentElement.clientWidth
|| doc.body.clientW
console.log(clientWidth)
if (!clientWidth) return;
var width = clientW
fz = 16 * width / 375;
docEl.style.fontSize = fz + 'px';
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, refreshRem, false);
doc.addEventListener('DOMContentLoaded', refreshRem, false);
refreshRem();
})(document, window);
rem计算(px2rem)
对于需要使用rem来适配不同·屏幕的元素，使用rem来作为CSS单位，为了方便，可以借助sass写一个函数计算px转化为rem, 写样式时不必一直手动计算。sass函数的使用若不熟悉可看下, 也可以使用sass的mixin来写，个人觉得用函数写更适合。
@function px2rem($px, $base-font-size: 32px) {
@if (unitless($px)) {
@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
@return px2rem($px + 0px);
} @else if (unit($px) == rem) {
@return $px;
@return ($px / $base-font-size) * 1
font-size: px2rem(18px);
我之前一直在想一个问题，选取哪个设备来做基准、屏幕宽度等分为多少比较合适，设计图给多大宽度的版本？被选取作为基准的设备，应当就是前端需要设计提供的设计图版本，这样可以避免一些尺寸上的纠缠，而等分为多少等分，除了考虑方便设计，是否需要考虑其他问题？对于根元素font-size没有手动设置的情况，1rem究竟等于多少？
了解到的一些事实：
某些Android设备会丢掉 rem 小数部分（具体是哪些设备，搜到的文章中没有说），那么1rem对应的px少些，在这些安卓设备上显示误差就会较小，当然如果不存在会丢掉小数这个问题，这一说也就不必考虑了。未设置font-size情况下，1rem的大小具体看浏览器的实现，默认的根元素大小是font-size=16px目前一般会选取iPhone6作为基准，设计图便要iPhone6的二倍图当动态缩放视口为1/dpr, 计算所得的根元素fontSize也会跟着缩放，即若理想视口(scale=1), iPhone6根元素fontSize=16 若scale=0.5, iPhone6根元素fontSize=32 因此设置视口缩放应放于设置根元素fontSize之前。
flex布局对于屏幕适配也很有帮助，有些地方通过flex布局的实现方式，效果会比较合理。
关于flex布局，暂时不了解的建议阅读阮一峰老师的教程，分语法和实践两篇，讲得很清晰易懂实用。
vw(view-width), vh(view-height) 这两个单位是CSS新增的单位，表示视区宽度/高度，视区总宽度为100vw,
总高度为100vh。
视区指浏览器内部的可视区域大小：window.innerWidth/Height
DownSampling: 大图放入比图片尺寸小的容器中时，出现像素分割成就近色
不同scale显示同一图片基本无问题;
同一sacle，不同倍数图，存在色差(Downsampling)
关于这个我还不是很了解，暂时记一下。
下面主要根据我的理解摘录了手淘公开的实现方案，详细可以去gitHub搜索查看，文末也附了链接。
图解设计与前端协作方案：
[淘宝手淘团队h5页面终端适配开源库：lib-flexible]()
方案关键点：
动态改写&meta name="viewport"&标签给&html&元素添加data-dpr属性，并且动态改写data-dpr的值给&html&元素添加font-size属性，并且动态改写font-size的值通过一段JS代码根据设备的屏幕宽度、dpr设置根元素的data-dpr和font-size, 这段JS代码要在所有资源加载之前执行，建议做内联处理。
各种元素(文本、图片)处理方案参考：
@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){
$baseline-rem: $baseline-px / 1rem * 1;
@if $support-for-ie {
#{$property}: $px-values;
@if type-of($px-values) == "number"{
#{$property}: $px-values / $baseline-rem;
$rem-values:();
@each $value in $px-values{
@if $value == 0 or type-of($value) != "number"{
$rem-values: append($rem-values, $value / $baseline-rem);
#{$property}: $rem-values;
适配不同屏幕宽度以及不同dpr，通过动态设置viewport(scale=1/dpr) + 根元素fontSize + rem, 辅助使用vw/vh等来达到适合的显示；若无需适配可显示1px线条，也可以不动态设置scale，只使用动态设置根元素fontSize + rem + 理想视口；当视口缩放，计算所得的根元素fontSize也会跟着缩放，即若理想视口(scale=1), iPhone6根元素fontSize=16 若scale=0.5, iPhone6根元素fontSize=32 因此不必担心rem的计算；!!css单位：以前我认为这样比较好：适配元素rem为单位，正文字体及边距宜用px为单位；现在认为全部用rem即可，包括字体大小，不用px；px为单位的元素，需根据dpr有不同的大小，如大小12px, dpr=2则采用24px, 使用sass mixin简化写法；配合scss函数，简化px2rem转换，且易于维护(若需修改$base-font-size, 无需手动重新计算所有rem单位)；px2rem函数的$base-font-size只跟根元素fontSize的基准（此文中是【fontSize=16px when 375】）以及设计图的大小有关，按此基准，若设计图为iPhone6二倍稿，则$base-font-size=32px，参数传值直接为设计图标注尺寸；使用iPhone6(375pt)二倍设计图:宽度750px；切图使用三倍精度图，以适应三倍屏（这个目前我还没有实际应用过）
没有更多推荐了，移动端web及app设计尺寸 - mouseleo - 博客园
转载 日 22:48:16984移动端高清、多屏适配方案背景开发移动端H5页面
面对不同分辨率的手机
面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：首先，选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480，现在更多的是iphone6的375×667)。
对于retina屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是原来的4倍（对iphone6而言：原先的375×667，就会变成750×1334）。问题：对于dpr=2的手机，为什么画布大小×2，就可以解决高清问题？
对于2倍大小的视觉稿，在具体的css编码中如何还原每一个区块的真实宽高(也就是布局问题)?带着问题，往下看...一些概念在进行具体的分析之前，首先得知道下面这些关键性基本概念(术语)。物理像素(physical pixel)一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。设备独立像素(density-independent pixel)设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。设备像素比(device pixel ratio )设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向
在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。综合上面几个概念，一起举例说明下：以iphone6为例：设备宽高为375×667，可以理解为设备独立像素(或css像素)。
dpr为2，根据上面的计算公式，其物理像素就应该×2，为750×1334。用一张图来表现，就是这样(原谅我的盗图)：上图中可以看出，对于这样的css样式：width: 2
在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈现的大小(物理尺寸)是一致的，不同的是1个css像素所对应的物理像素个数是不一致的。在普通屏幕下，1个css像素 对应 1个物理像素(1:1)。在retina 屏幕下，1个css像素对应 4个物理像素(1:4)。位图像素一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。谈到这里，就得说一下，retina下图片的展示情况？理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。在普通屏幕下是没有问题的，但是在retina屏幕下就会出现位图像素点不够，从而导致图片模糊的情况。用一张图来表示：如上图：对于dpr=2的retina屏幕而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊(注意上述的几个颜色值)。所以，对于图片高清问题，比较好的方案就是两倍图片(@2x)。如：200×300(css pixel)img标签，就需要提供400×600的图片。如此一来，位图像素点个数就是原来的4倍，在retina屏幕下，位图像素点个数就可以跟物理像素点个数形成 1 : 1的比例，图片自然就清晰了(这也解释了之前留下的一个问题，为啥视觉稿的画布大小要×2？)。这里就还有另一个问题，如果普通屏幕下，也用了两倍图片，会怎样呢？很明显，在普通屏幕下，200×300(css pixel)img标签，所对应的物理像素个数就是200×300个，而两倍图片的位图像素个数则是200×300*4，所以就出现一个物理像素点对应4个位图像素点，所以它的取色也只能通过一定的算法(显示结果就是一张只有原图像素总数四分之一，我们称这个过程叫做downsampling)，肉眼看上去虽然图片不会模糊，但是会觉得图片缺少一些锐利度，或者是有点色差(但还是可以接受的)。用一张图片来表示：针对上面的两个问题，我做了一个demo(内网访问)。demo中，100×100的图片，分别放在100×100，50×50，25×25的img容器中，在retina屏幕下的显示效果。条形图，通过放大镜其实可以看出边界像素点取值的不同：图1，就近取色，色值介于红白之间，偏淡，图片看上去会模糊(可以理解为图片拉伸)。
图2，没有就近取色，色值要么是红，要么是白，图片看上去很清晰。
图3，就近取色，色值介于红白之间，偏重，图片看上去有色差，缺少锐利度(可以理解为图片挤压)。爱字图，可以通过看文字"爱"来区分图片模糊还是清晰。(ps：如果看上去不明显，可以用手机扫码网页(内网地址)或者点击看会更直观点。几个问题这里说一下，移动端H5开发，在不同分辨率，不同屏幕手机下会遇到的几个经典问题。retina下，图片高清问题这个问题上面已经介绍过解决方案了：两倍图片(@2x)，然后图片容器缩小50%。如：图片大小，400×600;1.img标签width: 200
height: 300
2.背景图片width: 200
height: 300
background-image: url(image@2x.jpg);
background-size: 200px 300 // 或者: background-size:
这样的缺点，很明显，普通屏幕下：同样下载了@2x的图片，造成资源浪费。
图片由于downsampling，会失去了一些锐利度(或是色差)。所以最好的解决办法是：不同的dpr下，加载不同的尺寸的图片。不管是通过css媒体查询，还是通过javascript条件判断都是可以的。那么问题来了，这样的话，不就是要准备两套图片了嘛？(@1x 和@2x)我想，做的好的公司，都会有这么一个图片服务器，通过url获取参数，然后可以控制图片质量，也可以将图片裁剪成不同的尺寸。所以我们只需上传大图(@2x)，其余小图都交给图片服务器处理，我们只要负责拼接url即可。如，这样一张原图：https://img.alicdn.com/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg // 原图
可以类似这样，进行图片裁剪：// 200×200
https://img.alicdn.com/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg_200x200.jpg
// 100×100
https://img.alicdn.com/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg_100x100.jpg
(ps: 当然裁剪只是对原图的等比裁剪，得保证图片的清晰嘛~)retina下，border: 1px问题这大概是设计师最敏感，最关心的问题了。首先得说一下，为什么存在retina下，border: 1px这一说？我们正常的写css，像这样border: 1，在retina屏幕下，会有什么问题吗？先来，来看看下面的图：上面两张图分别是在iphone3gs(dpr=1)和iphone5(dpr=2)下面的测试效果，对比来看，对于1px的border的展示，它们是一致的，并无区别。那么retina显示屏的优势在哪里，设计师为何觉得高清屏下(右图)这个线条粗呢？明明和左右一样的~还是通过一张图来解释(原谅我再次盗图)：上图中，对于一条1px宽的直线，它们在屏幕上的物理尺寸(灰色区域)的确是相同的，不同的其实是屏幕上最小的物理显示单元，即物理像素，所以对于一条直线，iphone5它能显示的最小宽度其实是图中的红线圈出来的灰色区域，用css来表示，理论上说是0.5px。所以，设计师想要的retina下border: 1，其实就是1物理像素宽，对于css而言，可以认为是border: 0.5，这是retina下(dpr=2)下能显示的最小单位。然而，无奈并不是所有手机浏览器都能识别border: 0.5，ios7以下，android等其他系统里，0.5px会被当成为0px处理，那么如何实现这0.5px呢？最简单的一个做法就是这样(元素scale)：.scale{
.scale:after{
content:"";
border-bottom:1px solid #
-webkit-transform:scaleY(.5);
-webkit-transform-origin:0 0;
我们照常写border-bottom: 1px solid #，然后通过transform: scaleY(.5)缩小0.5倍来达到0.5px的效果，但是这样hack实在是不够通用(如：圆角等)，写起来也麻烦。当然还有其他好多hack方法，网上都可以搜索到，但是各有利弊，这里比较推荐的还是页面scale的方案，是比较通用的，几乎满足所有场景。对于iphone5(dpr=2)，添加如下的meta标签，设置viewport(scale 0.5)：&meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no"&
这样，页面中的所有的border: 1px都将缩小0.5，从而达到border: 0.5的效果。有人担心页面scale后会影响性能，@妙净同学做过性能测试，见(内网地址)。看一下实现后的效果图对比(右图为优化过的)：(ps: 图片被压缩过，可能看上去并不明显，可以用手机扫码或者点击(内网地址)对比看看)然而，页面scale，必然会带来一些问题：字体大小会被缩放
页面布局会被缩放(如: div的宽高等)这两个问题后面讲到...多屏适配布局问题移动端布局，为了适配各种大屏手机，目前最好用的方案莫过于使用相对单位rem。基于rem的原理，我们要做的就是: 针对不同手机屏幕尺寸和dpr动态的改变根节点html的font-size大小(基准值)。这里我们提取了一个公式(rem表示基准值)rem = document.documentElement.clientWidth * dpr / 10
说明：乘以dpr，是因为页面有可能为了实现1px border页面会缩放(scale) 1/dpr 倍(如果没有，dpr=1),。
除以10，是为了取整，方便计算(理论上可以是任何值)所以就像下面这样，html的font-size可能会：iphone3gs: 320px / 10 = 32pxiphone4/5: 320px * 2 / 10 = 64pxiphone6: 375px * 2 / 10 = 75px对于动态改变根节点html的font-size，我们可以通过css做，也可以通过javascript做。css方式，可以通过设备宽度来媒体查询来改变html的font-size：html{font-size: 32}
//iphone 6
@media (min-device-width : 375px) {
html{font-size: 64}
// iphone6 plus
@media (min-device-width : 414px) {
html{font-size: 75}
缺点：通过设备宽度范围区间这样的媒体查询来动态改变rem基准值，其实不够精确，比如：宽度为360px 和 宽度为320px的手机，因为屏宽在同一范围区间内(&375px)，所以会被同等对待(rem基准值相同)，而事实上他们的屏幕宽度并不相等，它们的布局也应该有所不同。最终，结论就是：这样的做法，没有做到足够的精确，但是够用。javascript方式，通过上面的公式，计算出基准值rem，然后写入样式，大概如下(代码参考自kimi的m-base模块)var dpr, rem,
var docEl = document.documentE
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
scale = 1 /
// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!}';
// 给js调用的，某一dpr下rem和px之间的转换函数
window.rem2px = function(v) {
v = parseFloat(v);
return v *
window.px2rem = function(v) {
v = parseFloat(v);
return v /
window.dpr =
window.rem =
这种方式，可以精确地算出不同屏幕所应有的rem基准值，缺点就是要加载这么一段js代码，但个人觉得是这是目前最好的方案了。因为这个方案同时解决了三个问题：border: 1px问题
图片高清问题
屏幕适配布局问题说到布局，自然就得回答一下最初的留下的那个问题：如何在css编码中还原视觉稿的真实宽高？前提条件：拿到的是一个针对iphone6的高清视觉稿 750×1334采用上述的高清方案(js代码)。如果有一个区块，在psd文件中量出：宽高750×300px的div，那么如何转换成rem单位呢？公式如下：rem = px / 基准值;
对于一个iphone6的视觉稿，它的基准值就是75(之前有提到);所以，在确定了视觉稿(即确定了基准值)后，通常我们会用less写一个mixin，像这样：// 例如: .px2rem(height, 80);
.px2rem(@name, @px){
@{name}: @px / 75 * 1
所以，对于宽高750×300px的div，我们用less就这样写：.px2rem(width, 750);
.px2rem(height, 300);
转换成html，就是这样：width: 10 // -& 750px
height: 4 // -& 300px
最后因为dpr为2，页面scale了0.5，所以在手机屏幕上显示的真实宽高应该是375×150px，就刚刚好。倘若页面并没有scale 0.5，我们的代码就得这样：.px2rem(width, 375);
.px2rem(height, 150);
这样的宽高，我们往往是这样得来的：将750×1334的视觉稿转成375×667的大小后，再去量这个区块的大小(感觉好傻)。
在750×1334量得区块宽高是750×300px后，再口算除以2(感觉好麻烦)。最后给出一张没有布局适配(上图)和用rem布局适配(下图)的对比图：(上面的手机分别是：iphone3gs, iphone5, iphone6)很明显可以看出，rem适配的各个区块的宽高都会随着手机屏宽而改变，最最明显的可以看一下图片列表那部分，最后一张图视觉稿要求只出现一点点，rem布局在任何屏幕下都显示的很好。字体大小问题既然上面的方案会使得页面缩放(scale)，对于页面区块的宽高，我们可以依赖高清视觉稿，因为视觉稿本来就×2了，我们直接量就可以了，那么对于字体该如何处理呢？对于字体缩放问题，设计师原本的要求是这样的：任何手机屏幕上字体大小都要统一，所以我们针对不同的分辨率(dpr不同)，会做如下处理：font-size: 16
[data-dpr="2"] input {
font-size: 32
(注意，字体不可以用rem，误差太大了，且不能满足任何屏幕下字体大小相同)为了方便，我们也会用less写一个mixin：.px2px(@name, @px){
@{name}: round(@px / 2) * 1
[data-dpr="2"] & {
@{name}: @px * 1
// for mx3
[data-dpr="2.5"] & {
@{name}: round(@px * 2.5 / 2) * 1
// for 小米note
[data-dpr="2.75"] & {
@{name}: round(@px * 2.75 / 2) * 1
[data-dpr="3"] & {
@{name}: round(@px / 2 * 3) * 1px
// for 三星note4
[data-dpr="4"] & {
@{name}: @px * 2
(注意：html的data-dpr属性就是之前js方案里面有提到的，这里就有用处了)根据经验和测试，还是会出现这些奇奇葩葩的dpr，这里做了统一兼容~用的时候，就像这样：.px2px(font-size, 32);
当然对于其他css属性，如果也要求不同dpr下都保持一致的话，也可以这样操作，如：.px2px(padding, 20);
.px2px(right, 8);
转自。参考文章
随笔 - 151}