开发移动端web的一些知识

Posted 2020-07-16 Go 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开发和响应式开发的的区别

1、一般在已经有pc端web ，单独开发移动web；针对移动端，开发效率高；只适配移动设备，pad体验不好；代码相当简洁，加载速度快。

2、一般新建的网站，适配各种终端；开发效率低；代码相对复杂，加载速度慢。