如何使用 CSS 实现响应式布局

时间:2021-11-21 来源:未知网络 作者:996建站网

像素

在区分 CSS 中常见的表示长度/大小的单位之前,我们先来了解「像素」:

  • 物理像素:(又称 设备像素)代表屏幕上点的数量。如 2340 x 1080 表示屏幕水平方向一排有 2340 个物理像素点。
  • 逻辑像素:(又称 设备独立像素)代表屏幕上图像的视觉尺寸。一般情况下 CSS 像素等同于逻辑像素(在页面缩放后不等)(常说的分辨率就是指逻辑像素)

物理像素点越小,则一个逻辑像素包含点物理像素点就越多,看起来就越清晰。

常见的单位

了解完像素,我们再来区分一下 CSS 中几种常见的单位:

  • px:固定长度单位,1px 代表一个逻辑像素。
  • em:相对长度单位,相对于父元素,不常用。
  • rem:相对长度单位,相对于 html 元素。比如一个元素设置 width: 2rem 表示该元素宽度为 html 节点的 font-size 大小的2倍(html 节点默认的 font-size 大小是 16px)。
  • vw/vh:相对长度单位,1vw 代表浏览器视口宽度的1%。
  • 1%:相对长度单位,对不同属性有不同的含义。 font-size: 200% 表示字体大小是默认(继承自父亲)字体大小的2倍。line-height: 200% 表示行高是自己字体大小的2倍。 width: 100%表示自己content的宽度等于父亲content宽度的1倍。padding-top , padding-bottom , margin-top , margin-bottom 等,使用百分比时依据的也是父容器的宽度,而不是高度

冷知识:Chrome 浏览器可以显示的最小字体是 12px,若设置小于 12px,会强制显示 12px

// 可以通过以下代码实现小于 12px 的字体显示
p{
  font-size:10px; 
  -webkit-transform:scale(0.8); // 0.8是缩放比例
}

如何使用 CSS 实现响应式布局插图

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序