实现适配布局

这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战

响应式布局的实现依靠媒体查询（ Media Queries ）来实现，选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配，但这样做会比较麻烦，只能在选取的几个主流设备尺寸下呈现完美适配。 即使是通过 rem 单位来实现适配，也是需要内嵌一段脚本去动态计算根元素大小,手淘就这样做。

/* 超小屏幕（手机，小于 768px） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端较为复杂，它涉及到三个视口：分别是 Layout Viewport（布局视口）、 Visual Viewport（视觉视口）、Ideal Viewport

视口单位主要包括以下

• vw : 1vw 等于视口宽度的1%
• vh : 1vh 等于视口高度的1%

视口单位区别于%单位，视口单位是依赖于视口的尺寸，根据视口尺寸的百分比来定义的；%单位则是依赖于元素的祖先元素。

利用视口单位适配页面

通过 Media Queries 实现的布局需要，根据屏幕分辨率的大小，配置多个响应断点，布局在响应断点范围内的分辨率下维持不变，而在响应断点切换的瞬间，布局马上产生变化

vw作为CSS单位

//iPhone 6尺寸作为设计稿基准
$vw_base: 375; 
@function vw($px) {
    @return ($px / 375) * 100vw;
}

1px物理像素线用transform的scale 实现

.box {
    position: relative;
    &::after {
        // 实现1物理像素的下边框线
        content: '';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-color: #ddd;
        height: 1px;
        left: 0;
        right: 0;
        top: 0;
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            -webkit-transform: scaleY(0.5);
            -webkit-transform-origin: 50% 0%;
        }
    }
}