[摘录总结]CSS-移动端

293 阅读2分钟

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()