移动端布局的出发点是页面内容根据手机浏览器宽度自动缩放, 使得页面布局效果可以保持一致 超大屏手机可能会有点老年机的感觉?

ps:选择rem而不是vw是出于兼容性的考虑.

 

首先例行惯例吧viewport 设置好

rem布局是相对html节点的font-size来作为标准, 于是不同的手机需要设置不同的html font-size, 这个可以通过js 来实现, 下面的代码是假设设计稿尺寸为640px的前提.

flexible.js

// 插入head中第一个script标签(function () {    var htmlElement = document.querySelector('html');    htmlElement.style.display = 'none';  // 防止页面闪动     // decided by the width of design page    var designWidth = 640;      function initSize() {        var deviceWidth = document.documentElement.clientWidth;  // 设备宽度        if(deviceWidth > designWidth) deviceWidth = designWidth;  // 设置最大尺寸        document.documentElement.style.fontSize = deviceWidth / (designWidth/100.0) + 'px';  // 设置html font-size    }    initSize();    htmlElement.style.display = 'block';     window.addEventListener('resize', function () {        initSize();    })})();

 

假设浏览器宽度为640 (和设计稿宽度相同), 那么font-size 就是 100px, 此时例如要设置margin-left: 10px 就是对应写成0.1rem.  

但布局的时候做这样的转换会很麻烦. 用sass 写一个转换函数可以方便我们书写样式.

@function pxRem($px) {
       $baseFontSize: 100px;    @return $px / $baseFontSize * 1rem;} // 使用.landing-footer {
       color: #ccc;    margin-top: pxRem(70px);    height: pxRem(82px);    line-height: pxRem(82px);}

 

此外如果想在pc上限制宽度的话, body 需要设置一个额外样式:

body {
       width: 6.4rem;  // 最大宽度 640px, 根据设计稿决定.    margin: 0 auto;}

 

最后说下字体的问题. 

除非网页用到了特殊的点阵字体(位图字体), 一般网页使用rem为单位设置字体大小是没有问题的.

另外需要注意chrome中的最小字体是12px, 需要和设计师有所沟通.

body {
     // 覆盖html的font-size    font-size: pxRem(14px);  // 设置默认大小} .element {
       font-size: pxRem(20);}

如果需要在html 上使用 .font-12, .font-14 之类的样式的话, 可以通过sass预先创建好

@for $fontSize from 12 through 48 {
       .font-#{$fontSize} {
           font-size: pxRem(#{$fontSize}px);    }}

中饭吃什么