移动端布局的方法(1)

几种移动端布局方法

 响应式布局

 

　　1 利用@meida判断各个size 　

媒体类型

@media (max-width:768px){

    //css 在浏览器的宽度低于768时有效

}

@media (max-width:1000px){

    div{background:blue;} // 当浏览器宽度低于1000px时

}

@media (min-width:1000px) and (max-width:1150px){

    div{background: yellow;}

}

@media only screen and (max-width:1150px){

    div{border:solid 1px;}

}

@media not print and (max-width:1150px){

    div{border-radius:50%;}

}

 

按需‘加载’css

 

@media还能够用在link标签上。

 

<link rel="stylesheet" href="css/1.css" media="(max-width:500px)"/>

 

当浏览器宽度低于500px时，1.css的样式才会有效果。但这不表明大于500px时，就没加载了1.css。使用了@media属性后，只会让你当条件符合了，才让对应的css文件有效果。并且用这种方式有一个好处，就是不用在css里写@media。

 

日常响应式网站的开发

平时响应式网站的开发，我都会先对比PC和MOBILE的设计稿，看看有什么区别，而后才进行编写css。一般都是使用flex。宽度尽可能用百分比，间距、高度、字体大小使用 em，就能够很方便的进行大小的控制。

 

　　2 rem

REM

 

REM这个单位，会根据html的font-size大小进行转换。

 

html{font-size:100px;}

p{padding-top:.5rem;}

 

转换后p的padding-top就是50px了。只要咱们进行适当的计算，当前屏幕的宽度，html的font-size是多少px就OK了。

 

如何计算当前html的font-size值

 

好比，咱们拿到的设计稿是750px，那就设置成当屏幕宽度是750的时候，html的font-size就是100px（固然这个100px你能够随意设置的，我设置成100px只是方便我计算），而后就根据当前屏幕的宽度 / 750 * 100，就获得了当前屏幕宽度的font-size值。

 

//当前屏幕宽度 / 750 = 当前屏幕宽度的font-size / 100

//代码以下

(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 = 100 * (clientWidth / 750) + 'px';

    };

  

    if (!doc.addEventListener) return;

       win.addEventListener(resizeEvt, recalc, false);

       doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

 

上面这段代码，是直接根据屏幕宽度进行计算font-size的。

而淘宝移动端REM方案，还根据你的dpr去计算，并且会进行总体的缩放, 这种方案，比上面的代码会好不少。淘宝的方案，解决了另外一个问题：边框1px的问题。

连接具体的效果：

第一种方案（http://www.rni-l.com/mobile/index2.html）

第二种方案（http://www.rni-l.com/mobile/index.html）

 

淘宝移动端REM

 

这个很简单，只须要加载js就行了

 

<script src="http://g.tbcdn.cn/mtb/lib-flexible/%7B%7Bversion%7D%7D/??flexible_css.js,flexible.js"/>

 

而后在css中，将px转为rem就行了。我是用scss的，因此写个函数就行了。

 

@function s($px) {

    <a href="http://www.jobbole.com/members/wx1409399284">@return</a> ($px / 75) * 1rem;

}

p{

    font-size:s(40);padding-left: s(52);

}

 

好比p的font-size在750的设计稿是40px，而后s(40)就OK了。

 3 最后是设置viewport

设置viewport中的width

这种方案，就是定死viewport中的width大小。

好比设计稿是750的，而后就在代码上写：

 

<meta name="viewport" content="width=750"/>

 

咱们用一样的页面，看看效果是怎么样

 

连接：第三种方案（http://www.rni-l.com/mobile/index3.html）

 

效果和第二种是同样的，在手机上看也是。

 

.top{

    display: flex;align-items:center;padding:50px 0 113.5px;justify-content:space-between;width:100%;

    p{

        font-size:40px;padding-left:52px;

    }

    img{

        width:71.5px;height: 71.5px;display: block;margin-right: 63.5px;

    }

}

 

而代码是直接使用px的，定死的。

 

感受从效果上来看，是很完美的，可是为何不是这种方法最流行？

 

@media screen and (max-width:360px){

    .box{color:red;}

}

 

@media screen and (max-width:520px){

    .box{color:black;}

}

 

@media screen and (max-width:750px){

    .box{color:yellow;}

}

 

我在iphone7，小米5s，谷歌浏览器模拟的iphone6plus上，字体颜色都是黄色的。因此@media媒体查询是没法使用的，由于已经将宽度定死了。而REM方案却可使用媒体查询的。由于移动端有不少奇怪的大小，并且在不一样的浏览器或者微信上，高度都是不一样的，因此可能会形成间距有很大的问题。

 

window.screen.width

 

用js，能够获取当前设备的宽度。

 

对比三种方式

 

响应式的优缺点

 

优势：兼容性好，@media在ie9以上是支持的，PC和MOBILE是同一套代码的，不用分开。

 

缺点：要写得css相对另外两个多不少，并且各个断点都要作好。css样式会稍微大点，更麻烦。

 

REM优缺点

 

优势：能维持能总体的布局效果，移动端兼容性好，不用写多个css代码，并且还能够利用@media进行优化。

 

缺点：开头要引入一段js代码，单位都要改为rem(font-size能够用px)，计算rem比较麻烦(能够引用预处理器，可是增长了编译过程，相对麻烦了点)。pc和mobile要分开。

 

设置viewport中的width

 

优势：和REM相同，并且不用写rem，直接使用px，更加快捷。

 

缺点：效果可能没rem的好，图片可能会相对模糊，并且没法使用@media进行断点，不一样size的手机上显示，高度间距可能会相差很大。

 

总结

 

仍是看项目需求，再决定使用哪一种方案，若是就手机站的话，我使用REM比较多。若是对距离比较精确的话，大量css3动画的，就使用第三种。