zoukankan      html  css  js  c++  java
  • 基于vw实现移动端适配

    假如设计稿的宽度为750px

    为了方便换算,如果我们让屏幕的总宽度总是等于750rem,那么1rem就相当于设计稿的1px了

    则有: 100vw=750rem

    即: 1rem=100vw/750=0.1333...vw

    因此我们只需把根元素html的字体大小设为0.1333...vw,

    然而Chrome浏览器限制最小的字体大小为12px,0.1333...vw显然在大部分移动设备上是不到12px的,

    如iPhone 6的逻辑宽度为375px,0.1333...vw=375px*0.1333...%<<12px

    因此我们让1rem=0.1333...vw*100=13.333...vw,突破浏览器字体大小限制的同时,也保留了10进制换算的便利性

    html{font-size:13.33333333vw}

    此时1rem就相当于设计稿中的100px,不需要借助postcss-pxtorem这类工具完成换算。

    当然,下面这个代码是要有的。

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  • 相关阅读:
    R语言学习——数据框
    R语言学习——数组
    R语言学习——矩阵
    R语言学习——向量
    SSM的项目结构
    simple-spring-memcached简介
    Arrays
    AbstractCollection 类
    Collections 类
    Map接口
  • 原文地址:https://www.cnblogs.com/flamestudio/p/12244737.html
Copyright © 2011-2022 走看看