导航

媒体查询

🔥 媒体查询的书写顺序

如果从小到大判断，那么也从小到大书写

@media screen and (min-width: 640px) {}
@media screen and (min-width: 1024px) {}
@media screen and (min-width: 1280px) {}

如果从大到小判断，那么也从大到小书写

@media screen and (max-width: 1280px) {}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 640px) {}

一般建议书写方式

媒体查询一般用在 PC 端，兼容移动端

那么就先考虑设计稿宽度，最后向下兼容：

.sw-conttainer {
	 padding-bottom: 120px;
	 @media (min-width: $sw-xs) {
	   padding-bottom: 40px;
	 }
	 @media (min-width: $sw-sm) {
	   padding-bottom: 60px;
	 }
	 @media (min-width: $sw-md) {
	   padding-bottom: 80px;
		 }
	 @media (min-width: $sw-lg) {
	   padding-bottom: 100px;
	 }
	 @media (min-width: $sw-xl) {
	   padding-bottom: 120px;
	 }
 }

通用断点

设备类型	断点范围（像素）	适用场景
手机（竖屏）	`≤ 576px`	小屏幕手机（默认移动端样式）
手机（横屏）	`576px - 768px`	大屏手机或小尺寸平板
平板	`768px - 992px`	iPad 等中等尺寸设备
桌面（小）	`992px - 1200px`	笔记本电脑或小尺寸显示器
桌面（大）	`≥ 1200px`	大屏显示器或电视

🔥 REM 适配方案

原理是什么？

rem 是一个相对单位，相对的是根元素（html）的字体大小（font-size）。这样一来我们就可以通过 html 上的字体大小来控制页面上所有以 rem 为单位的元素尺寸。

两种常见方案

把页面宽度分成 10 份

思路：

把页面宽度分成10分，算出每份 px 值（window.innerWidth / 10）
写个 scss mixin 函数，参数为设计稿px值，返回对应rem值（也就是份数）
公式：rem份数 = 设计稿px / 每份有多少px值

⚪️ 示例代码

例如在 vue 项目的 index.html 页中动态计算根元素字体大小

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    ...
  </head>
  <body>
    <noscript>
      ...
    </noscript>
    <div id="app"></div>
    <script>
    ;(function(doc, win) {
      const docEl = doc.documentElement
      const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
      const recalc = () => {
        let clientWidth = docEl.clientWidth;
        clientWidth = clientWidth < 750 ? clientWidth : 750;
        // 把屏幕宽度划分成10份，那么每一份的宽度就等于1rem，也就是 75px
        docEl.style.fontSize = clientWidth / 10 + 'px'
      }
      if (!doc.addEventListener) return
      win.addEventListener(resizeEvt, recalc, false)
      doc.addEventListener('DOMContentLoaded', recalc, false)
      recalc()
    })(document, window)
    </script>
  </body>
</html>

然后利用 css 预处理器定义一个 mixin 函数（下方用的stylus），用来将设计稿上的 px 转为对应的 rem 值

计算公式为：

页面元素的 rem 值 = 设计稿元素值（px）/（屏幕宽度 / 划分的份数）

mixin.stylus

/* 把px转为rem */
/* 用设计稿px除以每一份rem的px，就能算出几个rem */
px2rem(designpx)
  $rem = 750 / 10;
  return (designpx / $rem)rem

最后在 css 中使用

某 vue 组件的 style 标签中

/* 375 设计稿上 100% 宽以及 50 高的导航条（iPhone6 的 dpr 为 2 ，所以 px 值得都乘以 2） */

header
  width px2rem(750)
  height px2rem(100)

html 的 font-size 设置为 100px （PC端适配）

思路：

html { font-size: 100px; }，把100px当做因子
如果要设置 1200px 宽，那么换算下来就是 { width: 12rem }
这样也不会受到浏览器默认字体的影响（对比设置 html 字体大小为 62.5% ）

rem 布局产生小数像素怎么解决

能用 flex 就尽量用 flex，按比例布局
尽量避免小数（类似1.75rem这样的）
postcss-pxtorem
- 使用 postcss-pxtorem 插件可以将像素单位转换为 rem 单位，并自动处理小数像素问题。该插件会根据配置将像素值四舍五入到最近的整数，并生成对应的 rem 值。

来源：https://juejin.cn/post/6844903923539509262

🔥 VW/VH 适配方案

原理就是：把屏幕分成 100 份

举例：

假设设计稿尺寸是 750px，页面有一个按钮，按钮文字标注大小 28px，按钮高度标注为 48px，宽度为 120px，边框为 1px 不缩放。

<!DOCTYPE html>
<html
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .button {
      width: 16vw;        /*  120/(750/100vw)  */
      font-size: 3.73vw;  /*  28/(750/100vw)  */
      line-height: 6.4vw; /*  48/(750/100vw)  */
      border: 1px solid #000; /* 不需要缩放的部分用px */
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="button">按钮</div>
</body>
</html>

在正式的项目里，我们也可以用SCSS，把换算交给预处理器

@function px2vw($px) {
  @return $px * 100vw / 750;
	/* 或者 */
	@return $px / (750 / 100vw);
}
.button {
  width: px2vw(120);
  font-size: px2vw(28);
  line-height: px2vw(48);
  border: 1px solid #000;
  text-align: center;
}

来源：https://zhuanlan.zhihu.com/p/340299974

🔥 1px 物理像素解决

媒体查询 + 变换缩放

原理

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      #test {
        width: 100%;
        height:1px ;
        margin-top: 50px;
        background: black;
      }
      @media only screen and (-webkit-device-pixel-ratio:2) {
        #test {
          transform: scaleY(.5);
        }
      }
      @media only screen and (-webkit-device-pixel-ratio:3) {
        #test {
          transform: scaleY(.333333333333333333);
        }
      }
    </style>
  </head>
  <body>
    <div id="test"></div>
  </body>
</html>

stylus 实现方案

/* 给 dpr 1.5 的设备设置 0.7 的缩放 */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)
  .border1px
    &::after
      -webkit-transform: scaleY(.7)
      transform: scaleY(.7)
/* 给 dpr 2.0 的设备设置 0.5 的缩放 */
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
  .border1px
    &::after
      -webkit-transform: scaleY(.5)
      transform: scaleY(.5)

/* 给需要1px下边框的元素添加一个伪元素，
使其宽100%；高为用户自定义 */
border1px($color)
  position: relative
  &:after
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
    content: ' '
<!-- 1. 给需要添加1像素边框的元素设置一个类作为标识，让媒体查询能够识别 -->
<header class="border1px"></header>

<style lang="stylus" scoped>
header
  width px2rem(750)
  height px2rem(100)
  border1px(black) /* 2. 通过border1px设置边框 */
  background-color transparentify
</style>

让 Chrome 支持小于 12px 的文字方式有哪些？区别？

来源：https://vue3js.cn/interview/css/less_12px.html

一、背景

Chrome 中文版浏览器会默认设定页面的最小字号是12px，英文版没有限制

原由 Chrome 团队认为汉字小于12px就会增加识别难度

中文版浏览器

与网页语言无关，取决于用户在Chrome的设置里（chrome://settings/languages）把哪种语言设置为默认显示语言

系统级最小字号

浏览器默认设定页面的最小字号，用户可以前往 chrome://settings/fonts 根据需求更改

而我们在实际项目中，不能奢求用户更改浏览器设置

对于文本需要以更小的字号来显示，就需要用到一些小技巧

二、解决方案

常见的解决方案有：

zoom
webkit-transform: scale()
webkit-text-size-adjust: none

Zoom

zoom 的字面意思是“变焦”，可以改变页面上元素的尺寸，属于真实尺寸

其支持的值类型有：