1、在html中用了这样的meta标签
2、以font-size+rem实现响应式布局(iPhone6设计稿为例750pt*1334pt，1px=2pt)
大部分设计稿是以iPhone6为基础的，也就是说UI给的图是绘制在750pt 1334pt这样大小的图层上的，iPhone6下根元素的font-size=375/7.5px=50px的，所以UI图上的一个200pt 200pt的div我们在写样式时是这样的：
经过解析会变为100px*100px，再经过dpr=2的扩展又变为了200pt×200pt，这是正常的，因为iPhone6的屏幕只有375px（750pt）宽，要让750pt的宽度完全显示只能这样缩放。但这样就导致了1px边框的问题：
在750pt宽的UI稿上有一个高为1pt的线，通常做法会将其样式写为height：0.01rem；但这样解析出来是0.5px，iOS8以下及android是不支持小数像素的，不能通过dpr=2扩展成1pt，所以这些设备上会看不到这条线。
如果直接写height:1px,会被扩展成2pt，这就是变粗的原因。(iphone6下1px=2pt)
解决方案：
使用transform:scale(.5)，该属性的兼容性也很好
浏览器支持最小的字体是12px，ios除外，但UI稿上常出现9px的字体。咋整呢，还是用transform:scaleY(.x)来处理，可以写成一个scss函数
目前移动端的支持程度来看，ios7+，android 4.4+ 下已经支持了。如果仅仅是做ip6+的高清适配方案，image-set是一种实现方案。
2013年起从5M升到10M.
参考文章：
1、 移动 web 1px 边框解决方案
2、 移动端适配方案(上)
3、 localStorage
步骤八、打开hbuilder开发工具，新建一个html文件，在这个html页面，需要创建两个<div>，同时设置一些文字，第一个div作为对照组，第二个div需要添加class类名为big，方便后面设置行高：
步骤二、在<head>标签里创建一个<style>标签，然后设置使big类的line-height属性，该属性就是用来设置行间距的：
步骤三、按下crtl+S保存页面，在软件右侧的浏览器，可看到页面上big类的div标签里的行间距变大了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）