移动端WEB开发

目录

一，meta视口标签

二，物理像素（分辨率）与物理像素比

三，二倍图

二倍精灵图的做法

四，背景缩放  background-size

五，移动端开发选择

单独移动端页面（主流）

响应式兼容PC移动端

六，移动端技术解决方案

七，特殊样式

---

一，meta视口标签

想要理想视口，就要给移动端页面添加meta视口标签

属性                                        解释说明

width                        宽度设置的是viewport宽度，可以设置device-width特殊值

initial-scale               初始缩放比，大于0的数字

maximum-scale       最大缩放比，大于0的数字

minimum-scale        最小缩放比，大于0的数字

user-scalable          用户是否可以缩放，yes或no（1或0）

二，物理像素（分辨率）与物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的

开发时1px不一定等于1个物理像素

PC端页面，一个px等于1个物理像素的，但是移动端就不尽相同

一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

三，二倍图

Retina（视网膜屏幕）是一种显示技术，可以把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度

。对于一张50px*50px的图片，在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊

。在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题

。通常使用二倍图，因为iPhone6\7\8的影响，还存在3倍图 4倍图的情况

  /*在iPhone8下面*/
img{
        /*原始图片100*100px*/
       width：50px；
       height：50px;
}
.box{
        /*原始图片100*100px*/
        background-size：50px 50px;
}

二倍精灵图的做法

把精灵图等比例缩放为原来的一半

之后根据大小 测量坐标

注意代码里面background-size也要写：精灵图原来宽度的一半

四，背景缩放  background-size

background-size：背景图片宽度  背景图片高度；

只写一个参数  肯定是宽度，高度省略了，会等比例缩放

里面的单位可以跟%，相对于父盒子来说的

。单位：长度 | 百分比 | cover | contain；

。cover把背景图片扩展至足够大，以使其宽度和高度完全适应内容区域

。contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

五，移动端开发选择

单独移动端页面（主流）

通常情况下，网址域名前面加m（mobile）可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面

响应式兼容PC移动端

通过判断屏幕宽度来改变样式，以适应不同终端

缺点：制作麻烦，需要花费很大精力去调兼容性问题

六，移动端技术解决方案

CSS初始化：

Normalize.css: Make browsers render all elements more consistently.

CSS3盒子模型 :box-sizing

七，特殊样式

点击链接a会出现蓝色盒子  设置为transparent 完成透明

a{ -webkit-tap-highlight-color：transparent；}

加上这个属性才能给按钮和输入框自定义样式

input{ -webkit-apperance：none；}

禁用长按页面时的弹出菜单

img，a{ -webkit-touch-callout：none；}