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">
  • 相关阅读:
    餐盘模拟 数据结构及其描述
    游戏心理相关
    对于问题的认知过程
    程序语言中的基础理解
    游戏聊天记录
    游戏设定
    游戏技能学习
    游戏数值学习
    游戏的系统化思维
    游戏存储数据随笔
  • 原文地址:https://www.cnblogs.com/flamestudio/p/12244737.html
Copyright © 2011-2022 走看看