资讯 News
当前位置: 主页 > 详情 >
移动端适配的问题
发布日期: 2020-10-09 阅读次数: 23

 移动端适配的问题,一般来说我们都不会去深究,因为这种东西都是配置一次就再也不用管的了,接到设计图就按照祖传套路撸就完事了。按部就班的必定只能成为活动页写手,研究透彻以后,才能成为一名专业的活动页写手嘛。

 纠缠不清的关系
  文章开始,我们需要来捋清楚像素、视口以及缩放之间种种藕断丝连的关系,来抽丝剥茧一波。

  像素
  像素我们写得多了,不就是px嘛,为什么要拿出来说呢?因为像素还不仅仅就是px。

设备像素
  设备像素也可以叫物理像素,由设备的屏幕决定,其实就是屏幕中控制显示的最小单位。

设备独立像素
  设备独立像素是一种可以被程序所控制的虚拟像素,在Web开发中对应CSS像素。

DPR
  设备像素与设备独立像素之间的关系就是,DPR(设备像素比),设备像素比 = 设备像素 / 设备独立像素。这条公式成立的前提是,缩放比为1,原因下面讲到缩放的时候就会知道。根据这种关系,如果设备像素大于设备独立像素(DPR大于1的设备,我们常说的高清屏或者Retina屏),就会出现一个设备独立像素对应多个设备像素的情况:

  视口
  遥想从前智能手机刚出的时候,很少网站去特意适配移动端,然而用户是可以直接从手机去访问PC端网站的,所以怎样显示好一个网站,无论这个网站是一个PC网站还是移动端网站,就是亟需解决的问题。所以移动端三个视口布局视口、视觉视口、理想视口横空出世,成为各种移动适配方案的基础。

布局视口
  布局视口是在html元素之上的容器,我们的页面就“装”在布局视口中。

  想想我们常写的width:100%,这个100%是基于什么计算出来的呢?去翻资料会看到:如果某些属性被赋予一个百分值的话,它的计算值是由这个元素的包含块计算而来的。那html元素的包含块是什么呢?没错,就是我们的布局视口,它是所有CSS百分比推算的根源,如果说CSS是一支画笔,那么布局视口就是那张画布吧。这张画布有一个默认尺寸(如果没有手动去设置meta viewport),一般在768px ~ 1024px间,可以通过document.documentElement.clientWidth获取。这样一来,网页的布局就不再受限于设备的尺寸,即使是小屏幕的移动端设备中也能容得下PC网站。