您的位置：首页 > 其它

移动web开发rem,em及像素知识详解

2019-04-13 09:53 127 查看
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lily__an/article/details/89278205

基础知识

  • 移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。
  • 通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）
  • 分辨率则一般用像素来度量，表示屏幕水平和垂直方向的像素数，

长度单位

  • web开发中可以使用px(像素),em，rem,pt(点),in(英寸),cm(厘米)作为长度单位，但是我们最常用的还会px作为长度单位
  • em: 相对长度单位，其参照当前元素字体大小，如果当前元素未设置字体则会继承其祖先元素字体大小例如使用em单位时，像素值是em值乘以使用em单位的元素的字体的大小(例如：有一个div的字体大小是18px，那么10em就等同于10*18=180px)
  • rem: 相对长度单位，其参照根元素(html)字号大小，使用rem单位，他们转化的像素大小取决于根元素(heml元素)的字体大小，根元素字体大小乘以rem的值(根元素的字体大小16px，10rem就等同于10*16=160px)，
  • 我们可以将长度单位划分为相对长度单位和绝对长度单位

像素

  • 物理像素：物理像素指的是屏幕渲染图像的最小单位，属于屏幕的物理属性，不可人为进行改变，其值大小决定了屏幕渲染图像的品质，

  • 获取屏幕的物理像素尺寸

    window.screen.width;
  • window.screen.height;

  • CSS像素指的是通过CSS进行网页布局时用到的单位，其默认值(PC端)是和物理像素保持一致的（1个单位的CSS像素等于1个单位的物理像素），但是我们可通缩放来改变其大小

  • 我们需要理解的是物理像素和CSS像素的一个关系，1个物理像素并不总是等于一个CSS像素，通过调整浏览器缩放比例，

    • 视口

    视口（viewport）是用来约束你网站中最顶级块元素的，即它决定了的大小。

    通过以往CSS的知识，我们都能理解<html>的大小是会影响到我们的网页布局的，
而viewport又决定<html>的大小，所以viewport间接的决定并影响了我们网页的布局。
    • 获取viewport的大小 document.documentElement.clientWidth;
    • document.documentElement.clientHeight;
    内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航