百分比、rem布局

发表于 | 分类于

一、移动端页面布局

1、弹性布局（100%布局）——拉勾网、天猫首页 px

好处：充分发挥大手机的优势——显示内容越多.
缺点：屏幕过大，间距过大，比例失调。

特点：

  • 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变；
  • 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边。
2、等比缩放布局（rem布局）——网易、淘宝首页

尽量保证不同设备显示效果一致

<script type="text/javascript">
// 把尺寸放大N倍（N是window.devicePixelRatio）
var wd = document.documentElement.clientWidthwindow.devicePixelRatio/10;
//物理像素设备像素比=真实像素
document.getElementsByTagName(“html”)[0].style.fontSize = wd + “px”;
// 把屏幕的倍率缩小到N分之一（N是window.devicePixelRatio）
var scale = 1/window.devicePixelRatio;
var mstr = ‘initial-scale=’+ scale +’, maximum-scale=’+ scale +’, minimum-scale=’+ scale +’, user-scalable=no’;
document.getElementById(“vp”).content = mstr;
</script>

640px iphone5 px=根部字体大小=>rem * 不同设备的根部字体大小 ==>不同设备的具体px

  • 视口(viewport)设置：

  • 在html上根据不同分辨率设置不同font-size，通过js计算出来

  • 页面里除了font-size之外的其它css尺寸都使用了rem作为单位
  • 正文的font-size需要额外的媒介查询，并且不使用rem

devicePixelRatio设备像素比 真实像素640/物理像素320(固定)
视网膜屏幕

//1/4 5052/1263=4

  • 动态设置viewport的scale，淘宝触屏版首页布局的前提是viewport的scale根据devicePixelRatio动态设置：在devicePixelRatio为1的时候，scale为1；在devicePixelRatio为2的时候，scale为0.5；在devicePixelRatio为3的时候，scale为0.3333

1.获取不同手机的设备像素比 2
2.求出对应的scale的值，给meta标签（js）

640px

  • 动态计算html的font-size：font-size = deviceWidth / 10

  • 布局的时候，各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10

  • 每个元素的font-size可能需要额外的媒介查询，并且font-size不使用rem

//1.百分比布局（量到多少写多少，js代码删掉前两句，记得meta加id）
//2.复制一份百分比布局文件，在复制的文件夹上面改成rem布局（js代码。设计稿640px，说明你在iphone5上开发，插件px-rem：64；设计稿750px，说明在iphone6开发，px-rem75）
//3.rem概念理解:以根部字体大小为基准。
//每个元素的font-size可能需要额外的媒介查询