zoukankan      html  css  js  c++  java
  • 移动web中设计尺寸与制作尺寸详解

    如今所有移动设备的尺寸各异,对于移动web的响应式也是一个考验

    以下是目前一些主流设备的尺寸大小:

    上图所有设备中可以总结为:

    设备  分辨率  web尺寸  倍率  meta label
     iPhone4-4s  640×960px  320×480px  0.5

     <meta content="width=device-width, initial-scale=0.5,

    maximum-scale=0.5, user-scalable=no;" name="viewport">

     iPhone5-5s-5c  640×1136px  320×568px  0.5  

    <meta content="width=device-width, initial-scale=0.5,

    maximum-scale=0.5, user-scalable=no;" name="viewport">

     iPhone6  750×1334px  375×667px  0.5  

    <meta content="width=device-width, initial-scale=0.5,

    maximum-scale=0.5, user-scalable=no;" name="viewport">

     iPhone6 plus  1242×2208px  414×736  0.3333333333333333  

    <meta content="width=device-width, initial-scale=0.3333333333333333,

    maximum-scale=0.3333333333333333, user-scalable=no;" name="viewport">

     ipad mini  1024×768px  1024×768px  1  

    <meta content="width=device-width, initial-scale=1,

    maximum-scale=1, user-scalable=no;" name="viewport">

     安卓设备  -  -  1  

    <meta content="width=device-width, initial-scale=1,

    maximum-scale=1, user-scalable=no;" name="viewport">

    移动端字体大小html{font-size:62.5%;}

    在其他元素中使用字体大小的时候,使用单位为rem ,转换为像素是的倍率是10,也就是说 设计图中的字体大小为25px,css中font-size为2.5rem。

  • 相关阅读:
    模式应用:自定义匹配
    WPF架构学习总结
    脑子是用来想事的,不是记事的
    参加峰会“金点子”的材料
    我所想的GIX4的权限
    Process, Thread, STA, MTA, COM object
    JAVA 游戏分享 “是男人就下100层”
    关于静态方法和实例方法的一些误区。
    软区域
    Dispose, Finalization, and Resource Management
  • 原文地址:https://www.cnblogs.com/yesw/p/5485456.html
Copyright © 2011-2022 走看看