移动端css基础

移动端基础

移动端调试方法

• chrome 控制台 toggle device toolbar切换手机模拟器;
• 本机和手机连入同一局域网，直接访问开发环境ipv4:port;

视口viewport

布局视口layout viewport

• 移动设备默认使用布局视口，会尽可能的缩小网站让用户看到更多的网站内容;

• 这样PC页面也能在手机上查看，只是需要手动缩放来看；

视觉视口visual viewport

• 当前手机屏幕能看到的网站区域;
• 不管用户如何缩放，都不会影响到布局视口的宽度;

理想视口ideal viewport

• 移动端最理想的浏览和阅读宽度;
• 手动在html里面添加meta视口标签;
• meta视口标签，就是让布局视口的宽度等于理想视口;

meta视口标签

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

属性	说明
width	设置viewport 的宽度，默认视口宽度，可以设置device-width等
height	设置viewport 的高度
initial-scale	初始缩放值，大于1的数字
minimum-scale	最小缩放值，大于0的数字
maximum-scale	最大缩放值，大于0的数字
user-scalable	是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许（1或0）