zoukankan      html  css  js  c++  java
  • 移动设备适配

    看到最简单移动端适配的一篇文章写到移动端适配可以只在更元素html中写入 font-size: 13.333333vw;再结合布局中使用rem来实现移动端的尺寸适配;适配方案可见文章,这次也彻底明白为什么设计稿一般是750px,iPhone6的物理像素是750;但是逻辑像素是375px,可以在Chrome中使用移动端调试模式查看iPhone6宽度css尺寸是375px 因为是retina高清屏;屏幕以2个物理像素来显示一个逻辑像素;所以我们设计稿中需要使用750,而我们实际开发中需要写css像素,也就是逻辑像素,这里面就涉及单位转换,根元素html设置为13.3333vm因为vm是代表视口的宽度;可以理解为所占屏幕的百分比;1vm占据的宽度是屏幕的1%宽度;

    然后这个13.333333vw来源如下:

    首先要先说明:移动端的设计稿一般是width:750px,height:auto(这里指的是不确定),100vw = 100%,这个也没有问题吧;那么,设计稿拿过来,我们可以得出:750px = 100vw,这个也没有问题吧,那么1px等于多少vw呢? 是不是 1px = 100 / 750 vw = 0.13333vw;那么100px = 多少vw呢,这个应该知道了吧。100px = 13.33vw;

    思路过程:

    mobile.width = 750px  => 750px = 100% =100vw => 750px = 100vw => 1px = 0.1333vw => 100px = 13.33vw => 1rem =100px;

    即:我们把html:{font-size: 13.33vw} // 也就是以100px位基准;1rem = 100px;

    现在就好算多了;移动端的尺寸 / 100  =  XXX rem;

    所以我们拿到750设计稿之后,讲根元素设置为13.333333vw ,然后直接将设计稿px单位除以100, 写成rem单位,这样就可以让尺寸自适应不同单位的屏幕了;

  • 相关阅读:
    Spring_Bean的配置方式
    Nginx Ingress设置账号密码
    2.2.4 加减运算与溢出
    2.2.5-2 补码乘法
    2.2.3 移位运算
    flask钩子函数
    flask的cookie、session
    循环冗余校验码
    海明校验码
    python中的 __call__()
  • 原文地址:https://www.cnblogs.com/qqfontofweb/p/12785620.html
Copyright © 2011-2022 走看看