zoukankan      html  css  js  c++  java
  • 淘宝 rem 机制入门学习

    一 移动设备尺寸多种多样,带来适配难度,有时甚至无从下手。
    1 移动设备上的Px 像素不等于设备的物理像素。
    iphone 6 作为开发标准设备不等于设备的物理像素。
    iPhone 5 物理宽度320
    iPhone6s 物理宽度为414
    Android 设备物理宽度在iphone设备的宽度范围之内或者附近
    物理像素不等于css px像素,因为有retina屏,甚至3倍 retina屏。
    retina屏幕 一个物理像素等于两个CSS像素
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    移动端页面,首先必学申明 viewport属性 ,告知页面我们使用设备的宽度等于我们处理页面的整宽度。

    二 淘宝flexible 解决方案,所有移动设备全兼容,赞
    1 首先,引入
    <script src="http://g.tbcdn.cn/mtb/lib-fle...

    2会给html标签添加 data-dpr="2" 根据设备添加 屏幕像素比,区分普通屏幕 retina屏幕 3倍retina屏
    html font-size会设置为屏幕宽度的十分之一,不同设备不一样,但是都是十分之一。

    3 rem 技术方案
    所有元素的尺寸大小,边距,行高 等于都是用了rem 相对宽度来表达
    整个页面的宽度是 10rem 1rem就等于屏幕宽度十分之一 这样就为不同移动设备页面开发带来了方便的等比缩放能力。所有元素的大小设定都使用针对html标签的font-size 比例来计算。
    1rem=html font-size =screen width /10 = flexible.js 提供

    三 如何计算元素大小,宽高
    1rem = 屏幕宽度/10
    在现实之中,设计师是按照750像素宽度来设计页面的。
    因为理想的机型是iPhone 6 375dp 物理像素的宽 ,retina屏就是750px(css)
    750px=10rem 针对设计稿

    我们使用PS 量出的像素/750*10 = 最终的rem
    Photoshop像素/75 = em

    http://www.w3cplus.com/mobile...

  • 相关阅读:
    word文档的图片怎么保存到xhEditor上
    word文档的图片怎么保存到CuteEditor上
    word文档的图片怎么保存到TinyMCE上
    word文档的图片怎么保存到eWebEditor上
    word文档的图片怎么保存到wangEditor上
    ASP.NET如何上传大文件
    JavaScript如何上传大文件
    JS如何上传大文件
    Java如何上传大文件
    JSP如何上传大文件
  • 原文地址:https://www.cnblogs.com/10manongit/p/12611150.html
Copyright © 2011-2022 走看看