通过rem自适应屏幕尺寸

常用的前端单位

  • px

    px就是pixel的缩写，设备分辨率，物理像素

  • pt

    pt就是point的缩写，逻辑分辨率，逻辑像素

  • em

    参考物是父元素的font-size，具有继承的特点

    如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值

  • rem

    css3新单位，相对于根元素html（网页）的font-size

  • vw

    css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%

    浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

  • vh

    css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%

    浏览器高度900px, 1 vh = 900px/100 = 9 px

iPhone的屏幕尺寸规格

设备 逻辑分辨率（pt） 设备分辨率（px）
4(S) 320x480 640x960
5(S) 320x568 640x1136
6 375x667 750x1334

rem的使用

设置header内的<meta>标签

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

设置header内的<script>标签

<script type="text/javascript">

    //  designSize 设计稿宽度,一般为 640(px) 或 750(px)

    document.documentElement.style.fontSize = document.documentElement.clientWidth / designSize *100 + 'px';

</script>

设计稿640px，以iPhone4尺寸为例

页面内有一个红色盒子宽高都是320px，里面的文字是32px

对应的逻辑分辨率为宽高160px,文字16px

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <title>css适配</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">

    <style type="text/css">

      body{

        margin: 0 ;padding: 0;font-size: 0.32rem;

        /*

          0.32rem = 0.32 * 50px = 16px (320屏幕宽度下html的font-size: 50px)

          0.32rem = 0.32 * 64.68px = 20px (414屏幕宽度下html的font-size: 64.68px)

          0.32rem = 0.32 * 120px = 38px (768屏幕宽度下html的font-size: 120px)

        */

      }

      div{

          width: 3.2rem;height: 3.2rem ;background: red;

        /*

          3.2rem = 3.2 * 50px = 160px

        */

			}

    </style>

    <script type="text/javascript">

      document.documentElement.style.fontSize = document.documentElement.clientWidth / 640 * 100 + 'px';

      console.log(document.documentElement.clientWidth);    //  320

    </script>

  </head>

  <body>

    <div class="box">

      <span class="demo">测试</span>

    </div>

  </body>

  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

  <script type="text/javascript">

    $(function(){

      var font=$(".demo").css('font-size');

      console.log("字体大小:",font);    //  字体大小: 16px

      var boxw=$(".box").css('width');

      console.log("宽度:",boxw);    //  宽度：160px

    });

    $(function(){

      var font=$("html").css('font-size');

      console.log("html字体大小:",font);    //  html字体大小: 50px

    });

  </script>

</html>

设计稿750px，以iPhone6尺寸为例

页面内有一个红色盒子宽高都是375px，里面的文字是37.5px

对应的逻辑分辨率为宽高187.5px,文字18.75px

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <title>css适配</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">

    <style type="text/css">

      body{

        margin: 0 ;padding: 0;font-size: 0.375rem;

        /*

          0.375rem = 0.375 * 50px = 18.75px (375屏幕宽度下html的font-size: 50px)

          0.375rem = 0.375 * 42.67px = 16px (320屏幕宽度下html的font-size: 42.67px)

          0.375rem = 0.375 * 55.2px = 20px (414屏幕宽度下html的font-size: 55.2px)

        */

      }

      div{

        width: 3.75rem;height: 3.75rem ;background: red;

        /*

          3.75rem = 3.75 * 50px = 187.5px

        */

      }

    </style>

    <script type="text/javascript">

      document.documentElement.style.fontSize = document.documentElement.clientWidth / 640 * 100 + 'px';

      console.log(document.documentElement.clientWidth);    //  375

    </script>

  </head>

  <body>

    <div class="box">

      <span class="demo">测试</span>

    </div>

  </body>

  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

  <script type="text/javascript">

    $(function(){

      var font=$(".demo").css('font-size');

      console.log("字体大小:",font);    //  字体大小: 18.75px

      var boxw=$(".box").css('width');

      console.log("宽度:",boxw);    //  宽度：187.5px

    });

    $(function(){

      var font=$("html").css('font-size');

      console.log("html字体大小:",font);    //  html字体大小: 50px

    });

</script>

</html>

通过rem自适应屏幕尺寸的更多相关文章

  1. 【笔记】css 实现宽度自适应屏幕 高度自适应宽度

    如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...

  2. Delphi 实现窗体自适应调整尺寸以适应不同屏幕分辩率的显示问题

    给你一段代码,网上转的:unit uMyClassHelpers;//实现窗体自适应调整尺寸以适应不同屏幕分辩率的显示问题.//        陈小斌,2012年3月5日 interface Uses ...

  3. 【转载】rem自适应布局-移动端自适应必备

    原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...

  4. 移动端rem自适应设置

    对于移动端自适应各种终端的解决方案较多,本篇只是选择其中一种rem适配,我个人做移动端最喜欢的方案. rem就是以html根元素的字体大小为参考,比如html:font-size:20px;1rem= ...

  5. 彻底弄懂设置根元素字体大小calc(100vw/18.75) 实现rem自适应

    rem 是相对文档根元素(html)字体大小的尺寸单位,当元素的尺寸或文字字号等使用 rem 单位时,会随着根元素的 font-size 变化而变化,那么在不同分辨率的设备下动态设置根元素的字体大小就 ...

  6. iosiPhone屏幕尺寸、分辨率及适配

    iosiPhone屏幕尺寸.分辨率及适配     1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Fac ...

  7. Android平板上开发应用的一点心得——精确适配不同的dpi和屏幕尺寸

    一.引言 Android的开源使厂商无需自行研发OS,大大降低了研发.生产的成本,使得Android平板品牌如雨后春笋般爆发,山寨机厂商们似乎又找到了一丝希望.与此同时带来的是广大开发者的苦不堪言,各 ...

  8. iPhone屏幕尺寸、分辨率及适配

    转:http://blog.csdn.net/phunxm/article/details/42174937 目录(?)[+]   1.iPhone尺寸规格 设备 iPhone 宽 Width 高 H ...

  9. android自适应屏幕方向和大小

    一:不同的layout Android手机 屏幕 大小不一,有480x320, 640x360, 800x480.怎样才能让App自动 适应不同的屏幕 呢?      其实很简单,只需要在res目录下 ...

随机推荐

  1. 自学linux（修改中文）STEP2

    登录身份 最好用普通身份登录,而不是root用户,因为root用户权限太高,容易引起安全问题. 不显示中文 安装系统后,在图形化界面设置中文还是不生效.查询资料后如下: 1. 查看 linux 系统下 ...

  2. Linux爱情故事之如何以不一样的姿势（ssh）进入她的心

    文章目录 1.ssh是谁,为什么要进入她的心 2.如何正确的扒拉ssh 2.1.ssh的常用参数 2.2.您配钥匙吗?(ssh生成公钥或者秘钥) 2.3.我要单向畅通无阻的进入你的心(ssh-copy ...

  3. 利用脚本快速执行Dockerfile以及docker镜像的启停与删除

    `关于脚本:` 'sh setup.sh build' # 将Dockerfile创建成镜像 'sh setup.sh run' # 启动build创建好的镜像,放到后台运行 'sh setup.sh ...

  4. Vue2.0源码学习(6) - 组件注册

    组件注册 前言 在 Vue.js 中,除了它内置的组件如 keep-alive.component.transition.transition-group 等,其它用户自定义组件在使用前必须注册.在开 ...

  5. dart系列之:集合使用最佳实践

    目录 简介 使用字面量创建集合 不要使用.length来判断集合是否为空 可遍历对象的遍历 List.from和iterable.toList where和whereType 避免使用cast 总结 ...

  6. CentOS7防火墙firewall

    一.Firewall 1. 从CentOS7开始,默认使用firewall来配置防火墙,没有安装iptables(旧版默认安装). 2. firewall的配置文件是以xml的格式,存储在 /usr/ ...

  7. LED调颜色小程序

    燧星科技有一个免费的LED调颜色蓝牙小程序,小程序有一个拾色器用来调节颜色.亮度.饱和度,同时显示出RGB的十六进制与十进制数据.还有连接蓝牙模块的功能,可向通用蓝牙模块发送调节后的RGB数据,可为平 ...

  8. 【基础知识】CPU 是如何工作的 |CPU 通过总线读取内存的工作方式

    一.简单cpu  是如何工作 方式讲解 CPU 的根本任务就是执行指令,对计算机来说最终都是一串由 0 和 1 组成的序列.CPU 从逻辑上可以划分成 3 个模块,分别是控制单元.运算单元和存储单元 ...

  9. Specified cast is not valid(C#) 引发的思考（装箱，拆箱本质）

    没有很华丽的语言,直接拿代码说事情把. 这段代码,会报错吗?  结论:当然不会 这段代码会报错了.原因是为啥? 这里面的水比较深.也要提醒各位写代码的适合要引起注意.异常:System.Invalid ...

  10. MySQL[练习|面试题]-我的租房网

    1 # 创建数据库 2 CREATE DATABASE Tenement; 3 4 # 切换数据库 5 USE Tenement; 6 # 创建客户信息表 sys_user 7 CREATE TABL ...