zoukankan      html  css  js  c++  java
  • 移动端布局 REM

    css单位有3种:

    px:绝对单位

    em:相对父元素的单位

    rem:相对根元素(页面的html)的单位--css3新增的

    下面来仔细讲下近年来在webapp中常用的rem:

    什么是rem?

    rem就是指相对根元素(页面html)的单位。

    例如:html设置了font-size为10px,那么1rem就是10px,2rem就是20px

    html{
      font-size:10px;  
    }
    h1{
      font-size:2em;//相当于20px
    }
    

    移动端布局以前使用什么方法?

    一般来讲,移动端会使用流式布局、固定宽度、响应式做法、viewport缩放。

    1.流式布局

      流式布局指的是宽度使用百分比。目前,亚马逊、携程、兰亭的移动端就是用流式布局。他们宽度使用百分比,高度使用px。这样,在不同的屏幕适配器下,宽度会被拉伸,导致比例不协调

    2.固定宽度

      固定宽度虽然易于开发,但是会使大屏幕两边留白

    3.响应式做法

      响应式是用media query,但是这样并不能适应所有的屏幕

    4.viewport缩放

      天猫的web app的首页就是采用这种方式去做的,以320宽度为基准,进行缩放,最大缩放为320*1.3 = 416,基本缩放到416都就可以兼容iphone6 plus的屏幕了,这个方法简单粗暴,又高效

    rem能等比适应所有的屏幕

      使用rem,所有的元素都相对于根元素进行缩放,非常方便开发。最重要的点就在与计算出根元素的font-size值。可以使用JS来计算。

    到这里肯定有很多人会问是怎么计算出不同分辨率下font-size的值?

        首先假设页面设计稿是按照640的标准尺寸给我的前提下,(当然这个尺寸肯定不一定是640,可以是320,或者480,又或是375)来看一组表格。

        上面的表格蓝色一列是Demo3中页面的尺寸,页面是以640的宽度去切的,怎么计算不同宽度下font-site的值,大家看表格上面的数值变化应该能明白。举个例子:384/640 = 0.6,384是640的0.6倍,所以384页面宽度下的font-size也等于它的0.6倍,这时384的font-size就等于12px。在不同设备的宽度计算方式以此类推。

    下面推荐两个国内用了rem技术的移动站,大家可以上去参考看看他们的做法,手机淘宝目前只有首页用了rem,淘宝native app的首页是内嵌的web app首页。

    淘宝首页m.taobao.com

    D Xm.dx.com

    最后我们再来看一看他的兼容性:

    web app变革之rem

    下面是参考链接:
    http://isux.tencent.com/web-app-rem.html

    http://www.cnblogs.com/leejersey/p/3662612.html

    http://div.io/topic/1092

    http://www.ghugo.com/mobile-h5-fluid-layout-for-iphone6/

                                                                               --2016.3.25

  • 相关阅读:
    简单的一个php验证登陆代码
    目标,信念,坚强,淡定,团队
    linux下安装redis及PHP扩展应用
    mysql 命令行 隔离级别
    数据库事务的隔离级别
    mysql 乐观锁和悲观锁
    SpringBoot跨域问题CORS解决
    Oracle SQL题目及其解答(学生、课程、成绩、教师)
    SpringCloud学习2-eureka
    SpringCloud学习1-概述
  • 原文地址:https://www.cnblogs.com/Rosefxd/p/5320248.html
Copyright © 2011-2022 走看看