web前端全栈0基础到精通（祺）16

• vw + vh

  • vw 即 Viewport’s width 的简写，是 CSS3 规范中的视口单位，相对于视口的宽度，视口被均分为 100 单

    位的 vw, 相对于视口的高度，视口被均分为 100 单 位的 vh。

  • 750px设计稿 750px=100vw 1px = 0.1333333vw;

    如果使用rem 预设1rem = 100px 100px就是 13.333333vw 由此vm和rem 就可以进行换算了

• Media

  • 	@media (max-width: 768px) {
             
            .banner {
             
                margin-top: 44px;
                background-color: blue;
                height: 2.88rem;
                width: 100%;
            }
      }
    

  • 兼容问题

    • 小字体处理

      • 不同浏览器的最小字体不同，有的是10px，有的是12px。

        解决办法：设置字体时，不要小于12px，如果一定要小于12px，使用

        transform:scale()进行缩放。

• 移动端重置样式

  • 禁止用户选中文字

    -webkit-user-select: none;

    去除 android 下 a/button/input 标签被点击时产生的边框 & 去除 ios 下 a 标签被点击时产生的半透明灰

    色背景。

    -webkit-tap-highlight-color: rgba(0,0,0,0);

    按钮在 ios 下都是圆角。

    -webkit-appearance: none;