1.流式布局:使用百分比布局,非固定像素,内容向两侧填充,理解成流动的布局,成为流动布局
2.视觉窗口:viewport 是移动端特有的,这是一个虚拟的区域,用于承载网页
分三类:设备视口,页面视口,理想视口:一种理想的状态,设备视口=页面视口
承载关系:浏览器-->viewport-->网页
1.适配要求
1)网页的宽度必须和浏览器的宽度保持一致 width='device-width'
2)默认的显示缩放比例和PC端保持一致(缩放比例1.0) initial-scale=1.0
3)不允许用户进行缩放 user-scalable=0
-----达到以上三点,达到了适配,是国际上通用的适配方案,标准的移动端适配方案
2.适配设置:
视口:在head标签下添加一个<meta name='viewport' content='适配要求'>
viewport的功能
1)width:设置页面宽度 device-width:设置当前设备宽度
2)height:设置页面高度 device-height:设置当前设备高度
3)initial-scale 设置默认的缩放比例 1.0 [0.0-10.0]
4)maximum-scale 设置最大缩放比例
5)minimum-scale 设置最小缩放比例
6)user-scalable 用户是否允许缩放 yes no 1 0
3.标准的适配: <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
快捷键:meta:vp+tab键
屏幕像素:也叫物理像素,也叫像
移动端流动布局
最新推荐文章于 2022-05-19 22:48:02 发布
本文介绍了移动端的流式布局,强调了视口(viewport)在移动端的重要性,包括设备视口、页面视口和理想视口的概念。通过设置`<meta name='viewport' content='适配要求'>`来实现标准适配,确保网页宽度与浏览器一致,并禁止用户缩放。还提到了非主流的适配方案和移动端浏览器内核的兼容性,建议使用H5 API或轻量级库如zepto.js。
摘要由CSDN通过智能技术生成