前端布局方法之流式布局

移动端
viewport是浏览器显示页面内容的屏幕区域
viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"。

layout viewport
visual viewport
理想视口

meta标签

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

视口宽度和设备宽度一致
默认缩放比例为1.0
不允许用户缩放
最大缩放比例1.0
最小缩放比例1.0

@2x.png
@3x.png

物理像素
物理像素比 例如手机物理分辨率750 ,开发尺寸375
开发时候的1px和物理像素的关系

二倍图

背景缩放background-size
px
百分比
contain
cover

盒子模型, border和padding不会撑大盒子了
box-sizing: border-box

normalize.css

发布了370 篇原创文章 · 获赞 81 · 访问量 30万+

猜你喜欢

转载自blog.csdn.net/lineuman/article/details/103644649