移动web

移动web

/*
* 适配问题 : 屏幕尺寸不一样
* 解决方案 : 用百分比自适应布局. 叫做流式布局, 同时还需要对移动端的viewport视口进行设置, 才能达到适配的目的
* 流失布局的特点: 非固定像素, 内容向两侧填充
* 视觉窗口: viewport是移动端特有的. 看成是一个虚拟的区域. 用来承载网页的. 其关系: 浏览器承载viewport, 而viewport承载网页
*
* 适配方案的要求:
* `1.网页的宽度必须与浏览器保持一致
* 2.默认显示的缩放比例 和pc端保持一致 -->缩放比例: 1.0
* 3.不允许用户自行缩放网页
*
* 适配设置 :
*
* viewport适配功能:
* 1. 设置宽度 width=device-width 指视口的宽度等于当前设备的宽度
* 2.设置高度 height
* 3.设置默认的缩放比例 initial-scale=1.0
* 4.设置视口是否允许用户自行缩放 user-scalable=no 不允许 ( yes/ no 1/0)
* 5.设置最大缩放比例 maximum-scal=1.0 了解
* 6.设置最小缩放比例 mminimum-scal=1.0 了解
* */
a{
display: block;
width: 100%;
height: 100px;
/点击a标签清除高亮效果/
tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
border: 10px solid;
padding: 20px;
/解决防止出现滚动条/
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

    img{
        /*解决图片下间隙*/
        /*display: block;*/
        vertical-align: middle;
    }