对于vw布局的简单介绍、自动添加浏览器前缀、手淘布局方案、三种像素

vw布局

vw单位

viewport’width 的简写

相对于视口宽度的的相对单位

100vw = 视口宽度

1.直接使用vw单位布局

  • 以设计稿为基准,使用px进行布局

  • 将px转换为vw单位

    • 100vw = 视口宽度 = 设计稿的宽度 750 1vw = 7.5px

    • px to vw

      • 在设置中,定好视口宽度

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Spn0CKFG-1606552592937)(…/AppData/Roaming/Typora/typora-user-images/image-20201124092137031.png)]

插件使用:

  • ​ ctrl+a全选 ——》命令面板(ctrl+shift+p) —》px to vw

2.rem+vw单位布局

  • 以设计稿为基准值,预设1rem = 100px,
  • 将设计稿中的px值转换为rem进行布局(200px * 200px–>2rem * 2rem)
  • 换算 html{font-size: 13.33333vw}
    • 1rem = 100px
    • 100vw = 视口宽度 = 750px ==> 1vw = 7.5px
    • 100px = ? vw
      • 1rem = 100px = 13.33333vw

自动添加浏览器前缀

Autoprefixer是一款自动管理浏览器前缀的插件,它可以解析CSS文件并且添加浏览器前缀到CSS内容里,使用Can I Use(caniuse网站)的数据来决定哪些前缀是需要的。

根据配置Autoprefixer计算哪些前缀是需要的,哪些是已经过期的,添加也可清除过期的前缀;

配置参例

"autoprefixer.browsers": [
    "last 3 versions",
    "ie >= 10",
    "ie_mob >= 10",
    "ff >= 30",
    "chrome >= 34",
    "safari >= 6",
    "ios >= 6",
    "android >= 4.4"
  ]

浏览器列表browserslist

手淘布局方案(了解)

lib-flexible是什么?

阿里手机淘宝团队-H5适配的开源库

使用步骤

  • 添加对应的flexible_css.js,flexible.js文件:

    <script src="build/flexible_css.debug.js"></script>
    <script src="build/flexible.debug.js"></script>
    
  • 把视觉稿中的px转换成rem

    • 目前Flexible会将视觉稿分成100份,而每一份被称为一个单位a

    • 同时1rem单位被认定为10a

      针对我们这份视觉稿可以计算出:

      100a = 750
      
      1a = 7.5px
      
      1rem = 10a = 75px
      
    转换过程: 750*750px =  10rem* 10rem
    

实质(做了什么)

  • 动态改写<meta name="viewport">标签
  • <html>元素添加data-dpr属性,并且动态改写data-dpr的值
  • <html>元素添加font-size属性,并且动态改写font-size的值

三种像素(掌握)

设备像素 - 物理像素(真实像素)

它是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。

它表示【显示设备的真实像素】,此像素【是设备的固有属性】,也就是说,【从出厂的那一刻,设备像素已经固定,不会再发生改变】

设备独立像素(逻辑像素、虚拟像素)

设备独立像素,可以认为是计算机坐标系统中的一个点,这个点【代表一个可以由程序使用的虚拟像素】(比如说css像素),然后【由相关系统转换为物理像素】

CSS像素

CSS像素是一个抽像的单位,主要使用在浏览器上,用来精确度量Web页面上的内容。
一般情况之下,CSS像素称为与设备无关的像素

设备像素比(device pixel ratio)——dpr

它定义了物理像素和设备独立像素的对应关系。

设备像素比 = 物理像素 / 设备独立像素(css像素)
     
dpr=1 代表了1个设备独立像素  对应 1个物理像素
dpr=2 代表1个设备独立像素    对应 4个物理像素

Retina屏(视网膜显示屏)

在不同屏幕上,css所呈现的物理尺寸一致的,不同的是1个css像素所对应的物理像素数是不一致的,
在普通屏幕下1个css像素对应一个物理像素,而在retina屏幕下,1个css对应的是4个物理像素

所谓“Retina”是一种显示标准,是把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度。

一致的,不同的是1个css像素所对应的物理像素数是不一致的,
在普通屏幕下1个css像素对应一个物理像素,而在retina屏幕下,1个css对应的是4个物理像素

所谓“Retina”是一种显示标准,是把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度。

猜你喜欢

转载自blog.csdn.net/yangyanqin2545/article/details/110286289