开发移动端web的一些知识

因为智能机的普及，愈来愈多网页支持移动端了，那么如何解决适配移动端呢

在这总结一下本身的学习笔记

• viewport：虚拟的容器，仅在移动设备有效

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

width=device-width：设置宽度为设备宽度

initial-scale=1.0：初始缩放比例1.0

user-scalable=no：不容许用户自行缩放

在使用viewport布局中，网页中的盒子宽度通常使用百分比设置专家号

• 点击高亮效果

在移动端默认会出现点击高亮效果，那么如何去除其效果呢

-webkit-tap-highlight-color:transparent;/*清除点击高亮效果*/

若是想加颜色，直接改变transparent

• 防止盒子宽度溢出

在移动端全部盒子须设置

box-sizing: border-box;

• 移动web开发和响应式开发的的区别

一、通常在已经有pc端web ，单独开发移动web；针对移动端，开发效率高；只适配移动设备，pad体验很差；代码至关简洁，加载速度快。

二、通常新建的网站，适配各类终端；开发效率低；代码相对复杂，加载速度慢。

• 常见的几种移动站点布局

1. 流式布局
2. 媒体查询
3. rem自适应