rem单位大家可能已经很熟悉,rem是随着html的字体大小来显示代表宽度的方法,我们怎样进行移动端响应式开发呢

浏览器默认的字体大小为16px 及1rem 等于 16px

如果我们想要使1rem等于 12px 只需设置html的字体大小为 12/16 及html的字体大小为font-size:75%

html {
 font-size:75%;    <!--  12/16   -->
}

我们再来看一下各个浏览器的屏幕宽度

iphone4  320

iphone5  320

iphone6  375

iphone6p  414

大部分的安卓手机屏幕显示宽度为 360

我们公司的设计是以iphone6为基础设计的 及以375的为准设计的

如果想在 iphone其他版本中按iphone6比例自动缩放那么我们需要进行简单的缩放运算,同时也以1rem等于12px为例

iphone4  320/375*75%  = 64%

iphone5  320/375*75%   = 64%

iphone6  375/375*75%    =75%

iphone6p 414/375*75%    =82.8%

安卓         360/375*75%    =72%

我们可以这样设置在不同媒体中的字体的rem比例 由于安卓和iphone6区别较小,所以设置时忽略其差异

html {
-webkit-text-size-adjust: none;
font-size:75%;
height: 100%; } @media screen and (min-width: 10px) and (max-width: 320px) {
html {
font-size: 64%; } } @media screen and (min-width: 414px) and (max-width: 768px) {
html {
font-size: 82.8%; } }
/*字体大小 直接换算出10到20的字体大概代表多少rem 设置字体大小直接用class代替*/ .s10{font-size:0.83rem;}
.s11{font-size:0.913rem;}
.s12{font-size:1rem;}
.s13{font-size:1.079rem;}
.s14{font-size: 1.162rem;}
.s15{font-size: 1.245rem;}
.s16{font-size: 1.33rem;}
.s17{font-size:1.411rem ;}
.s18{font-size: 1.5rem;}
.s20{font-size: 1.66rem;}

用心了解以上内容在应用rem中会得心应手

移动端使用rem同时适应安卓ios手机原理解析,移动端响应式开发的更多相关文章

  1. 移动端开发之响应式开发和bootstrap基础

    响应式开发 (就是利用媒体查询针对不同宽度的设备进行布局和样式的设置,从而设配不同设备的目的) 响应式布局容器响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果 原理:不同屏幕下,通过媒体查 ...

  2. 安卓&IOS 手机添加O365 邮箱账户

    手机添加O365 邮件账户 一.Android手机添加O365邮件账户 1. 找到手机上“电子邮件” 2. 打开设置 3. 点击添加账户 4. 选择“Exchange” 5. 输入O365的邮箱账户和 ...

  3. 用rem来做响应式开发

    强烈推荐这篇文章:<web app 变革之rem> px转rem工具:<px转rem工具> 由于最近在做公司移动项目的重构,因为要实现响应式的开发,所以大量使用到了rem的单位 ...

  4. 用rem来做响应式开发(转)

    由于最近在做公司移动项目的重构,因为要实现响应式的开发,所以大量使用到了rem的单位,觉得这个单位有点意思.但是现在貌似用他的人很少.上一篇文章我分享了淘宝写的一篇rem的介绍,介绍的非常全面,但是他 ...

  5. rem布局完成响应式开发,通俗且详细的原理解析和代码实现

    一.rem布局基本原理 原理:rem可以理解为一个长度单位,单位rem的值等于网页font-size的值.如果网页的字体大小为默认值16px,那么1rem就等于16px,0.5rem等于8px. 根据 ...

  6. 用rem做响应式开发

    设置对应的响应式的html rem比例 rem就是根元素(即:html)的字体大小.html中的所有标签样式凡是涉及到尺寸的(如: height,width,padding,margin,font-s ...

  7. iOS架构:MVVM设计模式+RAC响应式编程

    https://cloud.tencent.com/developer/article/1117009 一:为什么要用MVVM? 为什么要用MVVM?只是因为它不会让我时常懵逼. 每次做完项目过后,都 ...

  8. rem、px、em之间的区别以及网页响应式设计写法

    个人收藏用,转载自:http://www.w3cplus.com/css3/define-font-size-with-css3-rem 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激 ...

  9. CSS3移动端vw+rem不依赖JS实现响应式布局

    1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...

随机推荐

  1. 利刃 MVVMLight 5:绑定在表单验证上的应用

    表单验证是MVVM体系中的重要一块.而绑定除了推动 Model-View-ViewModel (MVVM) 模式松散耦合 逻辑.数据 和 UI定义 的关系之外,还为业务数据验证方案提供强大而灵活的支持 ...

  2. tolua#代码简要分析

    简介 tolua#是Unity静态绑定lua的一个解决方案,它通过C#提供的反射信息分析代码并生成包装的类.它是一个用来简化在C#中集成lua的插件,可以自动生成用于在lua中访问Unity的绑定代码 ...

  3. 【HDOJ 1086】 模板水过

    You can Solve a Geometry Problem too Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/3 ...

  4. 【2017-04-21】Ado.Nte属性扩展

    通过对数据库表的封装,对该表的属性进行扩展. 1.例如:表中的性别是bool类,要实现显示给用户看的为“男.女” 2.通过表中的生日datetime类,来实现显示给用户看的年月日,自动计算年龄. 3. ...

  5. border-raduis 在IE8中的兼容性问题

    border-raduis 是css3新增加的属性,我们运用起来也很方便,效果很好,但是在IE8以及之前的ie版本并不支持这个属性,怎么解决这个问题呢? 1.切成背景 这也是我经常用到的方法,虽然说有 ...

  6. ueditor .net设置步骤

    1.官网http://ueditor.baidu.com,下载ueditor的.net版本 2.把下载后的文件夹放在项目content目录下 3.页面设置,Featrue为textArea的id 4. ...

  7. Linux安装redis及redis的php扩展。

    ------ redis安装,启动服务,开机启动,打开redis客户端 ------ yum install -y redis systemctl start redis systemctl enab ...

  8. (原创)看我用各种姿势在手机和PC查看到连接到的wifi密码

    今天一个女神来我家做客,她问我WiFi密码,然而我却奇迹般的忘记了(特么的当时心里一万个草泥马踏过去),让我在她面前尴尬求子的,所以为了防止你们也出现这种情况,我特地把各种方法整理了一下,那么感兴趣的 ...

  9. ssh整合时报出的异常及解决办法

    com.opensymphony.xwork2.inject.DependencyException: com.opensymphony.xwork2.inject.ContainerImpl$Mis ...

  10. CSS3弹性伸缩布局(中)——flexbox布局

    混合过渡版 上一篇我们主要讲了旧版box布局,今天这篇主要讲flexbox布局. 混合版本的Flexbox模型是2011年提出的工作草案,主要是针对IE10浏览器实现的伸缩布局效果,其功能和旧版本的功 ...