29 移动端中css你是使用什么单位

比较常用的

  • em:定义字体大小时以父级的字体大小为基准;定义长度单位时以当前字体大小为基准。例父级font-size: 14px,则子级font-size: 1em;font-size: 14px;;若定义长度时,子级的字体大小如果为14px,则子级width: 2em;width: 24px
  • rem:以根元素的字体大小为基准。例如htmlfont-size: 14px,则子级1rem = 14px
  • %:以父级的宽度为基准。例父级width: 200px,则子级width: 50%;height:50%;width: 100px;height: 100px;
  • vw和vh:基于视口的宽度和高度(视口不包括浏览器的地址栏工具栏和状态栏)。例如视口宽度为1000px,则60vw = 600px;
  • vmin和vmaxvmin为当前vwvh中较小的一个值;vmax为较大的一个值。例如视口宽度375px,视口高度812px,则100vmin = 375px;100vmax = 812px;

不常用的:

  • ex和chex以字符"x"的高度为基准;例如1ex表示和字符"x"一样长。ch以数字"0"的宽度为基准;例如2ch表示和2个数字"0"一样长。

移动端布局总结

  1. 移动端布局的方式主要使用rem和flex,可以结合各自的优点,比如flex布局很灵活,但是字体的大小不好控制,我们可以使用rem和媒体查询控制字体的大小,媒体查询视口的大小,然后不同的上视口大小下设置设置htmlfont-size
  2. 可单独制作移动端页面也可响应式pc端移动端共用一个页面。没有好坏,视情况而定,因势利导
Last Updated:
Contributors: leeguooooo