响应式开发

响应式

• 设计原则
• meta标签
• Bootstrap
• 机型兼容
• em / rem
• 点透事件
• 1px问题

设计原则

1、移动优先：设计初期考虑页面如何在多终端展示

2、渐进式增强，平稳退化：充分发挥硬件设备的最大功能

对于支持css3 feature的浏览器要充分发挥硬件设备的功能，提高体验

对于低端浏览器使用JS中的hack()方法

meta标签

<meta name=“viewport” content=“width=device-width, initial-scale=1.0,

user-scalable=no, minimum-scale=1.0, maximum-scale=1.0”>

viewport： viewport 是用户网页的可视区域。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

content属性值 :

width:可视区域的宽度，值可为数字或关键词device-width（页面宽度等于设备宽度）

height:同width

intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，

maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。

user-scalable:是否可对页面进行缩放，no 禁止缩放

Bootstrap

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷，目前最受欢迎的前端框架。

Bootstrap教程

机型兼容

手机固有bug某些 IOS设备 上触发不了点击事件

解决方法：在元素上加

pointer：cursor

em / rem

1、em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小

2、rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。rem取值的两种情况：

html{font-size:2rem}
/* 作用于根元素，相对于原始大小（16px），所以html的font-size为32px*/
p{font-size:2rem}
/* 作用于非根元素，相对于根元素字体大小，所以为64px */
           

点透事件

原因： zepto的tap事件是通过兼听绑定在document上的touch事件来完成tap事件的模拟的，并且tap事件是冒泡到document上触发的!!!而在冒泡到document之前，用户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因)(click事件有300ms的延迟,为了实现safari的双击事件的设计)，所以在执行完tap事件之后，弹出来的选择组件马上就隐藏了，此时click事件还在延迟的300ms之中，当300ms到来的时候，click到的其实不是完成而是隐藏之后的下方的元素，如果正下方的元素绑定的有click事件此时便会触发

解决方案：

1、touchstart->touchend->click。

即click的触发是有延迟的，这个时间大概在300ms左右。用touchstart事件代替click事件

.on('touchstart',function(){
e.preventDefault();
}) 
           

2、引入fastclick.js，因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上

3、用touchend代替tap事件并阻止掉touchend的默认行为

preventDefault()

4、延迟一定的时间(300ms+)来处理事件

1px问题

原因： devicePixelRatio特性导致，iphone的

devicePixelRatio=2

，而

border-width: 1px

描述的是设备独立像素，所以，border被放大到物理像素2px显示，在iPhone上就显得较粗。

解决方法：

transform: scale(0.5)

， 把border给了元素的before或者after等伪类，然后让伪类利用css3的transform的scaleY(0.5)缩放0.5像素，即可解决：

1.) 设置height: 1px，根据媒体查询结合transform缩放为相应尺寸。

div {
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}
           

2.) 用::after和::befor,设置

border-bottom：1px solid #000

,然后在缩放

-webkit-transform: scaleY(0.5);

可以实现两根边线的需求

div::after{
    content:'';width:100%;
    border-bottom:1px solid #000;
    transform: scaleY(0.5);
}
           

3.) 用::after设置

border：1px solid #000; width:200%; height:200%

,然后再缩放

scaleY(0.5);

优点可以实现圆角，缺点是按钮添加active比较麻烦。

.div::after {
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    -webkit-transform: scale(0.5,0.5);
    transform: scale(0.5,0.5);
    -webkit-transform-origin: top left;
}
           

媒体查询 + transfrom：

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}