first

适配问题

#####屏幕尺寸不一样

流式布局

流式布局就是百分比布局 非固定像素，内容向两侧填充。理解成流动的布局，称为流动布局

viewport

移动端特有的，这是一个虚拟的区域，承载网页

承载关系： 浏览器 viewport 网页 但是viewport不知道 缩放多少 这时需要适配

标准适配方案

######要求：

1.网页宽度必须和浏览器保持一致

2.默认显示的缩放比例和pc端保持一致(1.0)

3.不允许用户自行缩放网页

满足这些要求 就达到了适配 称为标准的适配

适配设置

如果没有任何设置 默认走的就是viewport的默认设置

设置新的viewport

viewport 设置

<meta name = "viewport"> 设置视口的标签  在头部  紧接在编码设置的后面

viewport功能

设置宽度 width = device-width
高度  height
设置默认缩放比例  initial-scale
是否允许用户自行缩放 user-scalable
设置最大缩放比例  maximum-scale
最小缩放比例  minimum-scale
在meta 标签里面的content进行设置以上参数

width = device-width 可以做到宽度的比例是1.0
initial-scale=1.0  这个也可以达到 宽度比例是1.0
user-scalable= no  满足第三点要求 不允许用户自行缩放网页  参数(yes, no, 1, 0)

meta:vp 适配的快捷键

移动端非主流适配方案

1. 页面上真实尺寸会比在设备上尺寸要大几倍

2. 假设设备是iphone4 320px 网页尺寸640px

3. 缩放操作 有2倍 3倍 和屏幕像素比有关系

4. 屏幕像素 (物理像素,像素点) px 页面尺寸单位

5. 物理像素 是设备显示屏的最小可视颗粒的大小 以前的手机（直板手机）

6. 现在有 高清显示屏 视网膜屏 retina屏

7. 视网膜屏 retina屏 显示效果更加细腻 图片的质量也要提高 不然会模糊

8. 根据屏幕的像素比 屏幕像素比就是（一个3px宽的屏幕像素能放3个物理像素） 来缩放网页 提高网页清晰度 （一个2px宽的屏幕像素能放2个物理像素）如果是1px进行3个物理像素就会模糊 1px是饱和

9. 成本高 一般企业还是用标准自适应

在高清显示屏中，图片可能会失真

移动端不建议使用jq

1.可以使用jquery,但是不建议
2.jquery  做了很多桌面浏览器的兼容问题 特别是IE，但是移动端没有IE浏览器
3.主流的浏览器：谷歌 火狐（2016年停止了维护和更新） safari浏览器  百度  360 qq ...
4.特点：内核基本上都是  webkit  或者 blink  兼容  -webkit-
5.使用H5的api 或者说使用一个 叫做： zepto.js 的库（基于高版本浏览器开发）

移动端 web-boxing-sizing

boxing-sizing:

1、content-box 计算宽度不包含padding和border宽度

2、border-box border和padding计算入width之内

3、padding-box padding计算入width之内

页面尺寸大于屏幕 会出现左右的滚动条 如果 width: 100%; 移动端布局是非固定像素

解决方法 box-sizing: border-box; 就把border的宽度计算计算到width 100% 进去了 就不会出现滚动条

移动端的浏览器 使用的内核 一般时 -webkit 或者

box-sizing: border-box; 
-webkit-box-sizing: border-box;兼容代码

####移动端的点击高亮效果清除

tap-highlight-color: transparent; 点击的时候设置为透明
-webkit-tap-highlight-color: transparent; 兼容代码

基本样式

在textarea设置 resize: none;不允许用户改变尺寸

-webkit-appearance: none; 清除 input或者textarea里面的默认样式
必须加上-webkit才有效

在移动端的提示内容使用 placeholder=“占位符”

####二倍图解决失真问题

图片过大 放不下 需要进行压缩

缩放的比例是根据图片的像素进行缩放 物理像素 不是 px 页面大小

失真 就是给予压缩就可以了

background: url("../image/sprites.png") no-repeat 0 -105px / 200px 200px;
/ 200px 200px压缩的比例  对应的定位也需要改变

插件地址 https://www.cnblogs.com/hykun/p/sublimeText3.html

使用精灵图的公用样式

解决图片的下间隙

图片浮动后是inline-block 会受文本基线的影响 也就是文本有的会突出 这样就会产生下间隙

第一种在 body 中设置 font-size: 0px;

第二种设置图片的样式 diaplay： block

第三种设置 img{

vertical-align: middle;

}

####轮播图

transform: translateX(-10%);
-webkit-transform: translateX(-10%);
这个也需要适配

轮播图超出的部分隐藏 最外层父容器overflow： hidden

box-sizing的border-box模型的宽 把padding和border计算进去

移动web导航栏

当有padding-top的时候 子元素浮动 此时父元素只占一丁点位置，需要清除浮动 父元素才会暂满整个空间

或者给父元素加高

秒杀头部

text-decoration: line-through;秒杀划线