zoukankan      html  css  js  c++  java
  • 移动端适配的一些理解


    rem是相对于根元素html的font-size。 1rem = html的font-size


    移动端适配通常使用rem。

    在开发时,设计稿通常为750px物理像素 ,所以用750设计稿举例
    对应的iphone6的375px逻辑像素。(物理像素是逻辑像素的2倍)

    375 / 7.5 = 50px(375 / 750 * 100 = 50px)
    屏幕宽度 / 7.5 = html字体大小

    转化为代码
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + ‘px‘


    大多数人走到这一步会有疑问,为什么是用屏幕宽度除以7.5呢? 是应为设计稿是750的原因吗?
    我的理解是,除以7.5和设计稿的750没有关系,只是为了方便计算,如何方便计算,看到下面就会明白了。

    现在我们经过一系列操作得到以下代码:
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + ‘px‘

    在iphone6上,屏幕宽度是375,所以,html 字体的大小是 50px, 那么 1rem = 50px (我们只需要计算好iPhone6上rem,其他设备就会自动适配)


    假设:在750的设计稿上,有一个宽高各100px的正方形,那么转化到iphone6上等于多少rem呢?

    100px 是物理像素,从750设置稿 转到 375设备上, 需要除2 ,所以 100px / 2

    在iphone6上,目前设置的html是50px, 1rem = 50px

    所以最后得到的结果是: 100px / 2 / 50px = 1rem,我们可以得到一个公式(设计稿上的像素 / 2 /50 就等于转化后的rem)
    再简化一步( 设计稿上的像素 / 100 就等于转化后的rem)
    所以,今后只要设计稿是750px, 我们在iPhone6上开发, 转化rem时候,
    设计稿像素/100 = 转化后的rem

    那么设计稿上 宽高100px的正方形 = 100px / 100 = 1rem

     

     

     

     

     

     

     

     

     

     

     

  • 相关阅读:
    ElasticSearch已经配置好ik分词和mmseg分词(转)
    Java:Cookie实现记住用户名、密码
    (转)10大H5前端框架
    msysGit在GitHub代码托管
    mongodb 语句和SQL语句对应(SQL to Aggregation Mapping Chart)
    centos 7 安装redis
    mac下idea卡顿问题解决
    在linux系统中,使用tomcat的shutdown.sh脚本停止应用,但是进程还在的解决办法
    centOS 7.4 安装配置jdk1.8
    CentOS6 在线安装PostgreSQL10
  • 原文地址:https://www.cnblogs.com/javascript9527/p/14929749.html
Copyright © 2011-2022 走看看