移动web开发响应式布局总结

首先来理解三个概念。

一、viewport深入理解

　我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

　该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。
　
　点击这里查看viewport详细介绍

二、flexbox弹性盒子布局

　flexbox是css3的新属性，具有新旧两个版本。
　flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。（这里我们称为flex）。
　flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小他们以防止溢出容器。
　详细的介绍点击链接　flexbox详细介绍

三、媒体查询@media query

　 media query是css3的新属性，针对不同的设备可以使用不同的css属性。用起来很简单，直接在css文件中添加以下代码即可：
　 @media 媒体设备 and(条件)。
　 看下面的代码，在不同屏幕宽度下使用不同的css样式：

@media only screen and (max-width: 2000px) { 
    html {
        font-size: 150%;/*20 ÷ 16 × 100% = 62.5%*/
    }
}
@media only screen and (max-width: 1500px) { 
    html {
        font-size: 125%;/*20 ÷ 16 × 100% = 62.5%*/
    }
}
@media only screen and (max-width: 1280px) { 
    html {
        font-size: 110.6%;/*17 ÷ 16 × 100% = 62.5%*/
    }
}
@media only screen and (max-width: 720px) { 
    html {
        font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/
    }
}
@media only screen and (max-width: 600px) { 
    html {
        font-size: 50%;/*8 ÷ 16 × 100% = 62.5%*/
    }
}
@media only screen and (max-width: 414px) { 
    html {
        font-size: 50%;/*7 ÷ 16 × 100% = 62.5%*/
    }
}
@media only screen and (max-width: 375px) { 
    html {
        font-size: 37.5%;/*6 ÷ 16 × 100% = 62.5%*/
    }
}
@media only screen and (max-width: 320px) { 
    html {
        font-size: 31.25%;/*5 ÷ 16 × 100% = 62.5%*/
    }
}
@font-face {
    font-family:"acme";
    src: url(acme.TTF);
}

再看一下如何进行响应式设计：

响应式设计总结：

1.使用百分比布局

仅仅使用媒体查询来适应不同的固定宽度设计，只会从一组css到另一组css切换，两种之间没有任何平滑的渐变。当没有命中媒体查询时，变现就会变得不可控制（滚动，换行）。

2.设置弹性图片

img {
    max-width: 100%;
}

很简单，如同第一点布局使用百分比，图片也使用百分比。其背后的思路是：无论何时，都全包在图片的元素宽度范围内，以最大宽度同比完整的显示图片。

3.重新布局，显示与隐藏

当页面达到查手机屏幕宽度的时候，很多时候就要放弃一些传统的页面设计思想。力求页面简单，简洁。所以我们必须要做出一下处理：

1. 同比例缩减元素尺寸
2. 调整页面结构布局
3. 隐藏冗余元素
   注： 经常要切换的位置元素使用绝对定位，减少重绘提高渲染能力。

解决手机端一像素边框问题：
在高清屏下，有时候当我们设置手机边框为1px的时候，实际看起来并没有那么精致，那是因为在高清屏幕下1px用2dp去渲染。如果我们将边框设置为border : 0.5px 是否可行呢？答案是仅在ios8下可用。现在一种比较成熟的写法是用到了scacleY(0.5)。我们知道scacleY(value)中，当value>1表示垂直方向的扩大，<1表示缩放，具体写法如下：


.sidebar .folder li {
/*border-bottom: 0.5px solid #000;*/
padding: 8px 0 8px 15px;
positon: relative;
}
.folder li:after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
border-bottom: 1px solid #ddd;
-webkit-tranform: scaleY(0.5);
}
更多精彩内容请访问：前端博客