通过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. Solution -「ARC 104E」Random LIS

    \(\mathcal{Description}\)   Link.   给定整数序列 \(\{a_n\}\),对于整数序列 \(\{b_n\}\),\(b_i\) 在 \([1,a_i]\) 中等概率 ...

  2. suse 12 二进制部署 Kubernetets 1.19.7 - 第10章 - 部署kube-proxy组件

    文章目录 1.10.部署kube-proxy 1.10.0.创建kube-proxy证书 1.10.1.生成kube-proxy证书和秘钥 1.10.2.创建kube-proxy的kubeconfig ...

  3. 前端生成PDF，让后端刮目相看

    PDF 简介 PDF 全称Portable Document Format (PDF)(便携文档格式),该格式的显示与操作系统.分辨率.设备等因素没有关系,不论是在Windows,Unix还是在苹果公 ...

  4. 树莓派PICO刷入MicroPython内核的两种方式

    一.MicroPython简介 MicroPython 是 Python 3编程语言的精简高效实现,其中包括 Python 标准库的一小部分,并且经过优化,可在微控制器和受限环境中运行. 可以在 25 ...

  5. 超简单集成 HMS ML Kit 实现最大脸微笑抓拍

    前言 如果大家对 HMS ML Kit 人脸检测功能有所了解,相信已经动手调用我们提供的接口编写自己的 APP 啦.目前就有小伙伴在调用接口的过程中反馈,不太清楚 HMS ML Kit 文档中的 ML ...

  6. ASPack壳脱壳实验

    实验目的 1.学会使用相关软件工具,手动脱ASPack壳. 2.不要用PEiD查入口,单步跟踪,提高手动找入口能力. 实验内容 手动对文件"ASPack 2.12 - Alexey Solo ...

  7. 【C#TAP 异步编程】构造函数 OOP

    原文:异步 OOP 2:构造函数 (stephencleary.com) 异步构造带来了一个有趣的问题.能够在构造函数中使用会很有用,但这意味着构造函数必须返回一个表示将来将构造的值,而不是构造的值. ...

  8. 【CPU】进程管理之五状态模型

    本文为第三篇,进程管理之五状态模型,进程在操作系统里边是有多个状态的,本文就是了解进程在操作系统中的多个状态 1.进程的五个状态 创建状态 就绪状态 阻塞状态 执行状态 终止状态 2.进程处于这五种状 ...

  9. 三大数据库 sequence 之华山论剑 (下篇)

    MySQL 5.7 MYISAM ENGINE 以下是 MySQL 5.7 MYISAM ENGINE 中的运行结果 mysql> CREATE TABLE tb_test5 ( -> t ...

  10. 计算机网络-IP篇

    目录 IP 基本认识 IP地址 IP 地址的分类 公有 IP 地址与私有 IP 地址 IP 地址与路由控制 IP 分⽚与重组 IPv6 基本认识 IPv4 ⾸部与 IPv6 ⾸部 IP协议 DNS A ...