viewport
视口:可在 meta 中设置,常用移动端视口分为:layoutviewport,visualviewport,idealviewport
layoutviewport
:视窗视口,一般设为 980px,通过缩放解决移动端屏幕尺寸小而影响网页显示的问题;visualviewport
:视觉视口,指移动端上课件的视口大小;idealviewport
:理想视口,通过修改 layoutviewport,将其等于设备宽度,使不同分辨率的移动端显示页面效果相同
固定定位在安卓上失效
将 viewport 大小设为 idealviewport
,这样就不会出现视口宽度大于屏幕而出现的滚动条,导致固定定位基于屏幕来固定的效果无法实现的情况
像素
设备像素
物理像素,一般情况下等同于手机的分辨率,且设备像素不可变
设备独立像素
与 css 像素等价,是相对于设备像素的相对单位,取决于页面的缩放程度和 dpr 的大小
dpr
设备像素和设备独立像素的比值,一般 dpr 是 1,苹果近代产品的 dpr 为 2
ppi
代表每英寸的无皮像素的密度,分辨率越大的设备,ppi 越大
移动端布局
rem
优点:实现整体缩放,兼容性好 缺点:特殊 dpr 设备效果差,使用 iframe 引用出现问题
vw + vh
viewport width 与 viewport height 优点:兼容性好 缺点:px 转换存在误差,导致一定的像素差
媒体查询
使用 @media
查询客户端的类型,当为真的时候,相关的样式表或样式会被应用;当为假的时候,相关的样式表会样式不被应用,但仍被下载
缺点:针对不同设备,需要不同的样式,比较麻烦
1px
- meta viewport
- border-image
- transform:scale()