有哪些网页尺寸单位?

CSS 中的单位有很多种:

  • 百分比(%)
  • 英寸(in)
  • 厘米(cm)
  • 毫米(mm)
  • 磅数(pt)
  • 12 点活字(pc)
  • 字母高度一半(ex)
  • 父级字体(em)
  • 像素(px)
  • 根元素字体(rem)
  • 相对于视窗的宽度(vw)
  • 相对于视窗的高度(vh)
  • 相对于视口的宽度或高度中较大的那个(vmax)
  • 相对于视口的宽度或高度中较小的那个(vmin):

查询浏览器兼容网站:http://caniuse.com/

设备像素dp(device pixels)

ppi(pixels per inch)表示每英寸所拥有的像素(pixel)数目,数值越高,代表屏幕能以更高的密度显示图像。

计算公式:ppi=像素数量/物理尺寸(英寸数)

设备独立像素dips(device-independent pixels)

可看到同一张图片在各屏幕显示大小不一。

我们希望不同屏幕显示图片的大小要一致。

我们要计算图片缩放比例。

计算公式:图片逻辑像素大小px1 / 图片缩放后实际像素大小px2 = 设备像素dp / 设备独立像素dips

px2 = px1 * (dp / dips)

px2 = px1 * dpr

设备像素比dpr(devicePixelRatio)

devicePixelRatio是设备像素dp和设备独立像素dips的比例,

也就是dpr = dp / dips

css像素

css像素是一个相对单位。

相对不同屏幕,其实际像素大小不同。

我们定义时,是定义其逻辑像素。即该图要用多少个像素来显示。

rem是什么?

rem顾名思义就是root element,这个是一个相对的单位。

与em的差别在于rem相对的是根节点html的font-size,em相对的是父元素font-size。

如何优雅地使用rem

使用rem其实是修改html的font-size,那么使用rem的元素的大小也会相应的改变,所以我们只要写一份css就可以适配所有手机的屏幕了。虽然rem在某些浏览器下面不够精准,但那也只是极少数,如果需要非常精准的适配,那么可以使用js来计算html的font-size。

现在设计师给的视觉稿,一般都是按照750px来设计的。当我们拿到视觉稿时,首先把视觉稿的宽度转换为rem,我们并不需要考虑设备的分辨率,只需要按照

计算公式:视觉稿宽度 = font-size * rem

这个公式来计算就好了。视觉稿的宽度是给定的,我们以750px为例,font-size 与rem是两个变量,我们只需要它们的乘积等于640即可。我们采用定一变一的方式,假定rem=7.5,那么初始值font-size就必须等于 100px,我们就可以根据需要适配的屏幕宽度来等比例调整font-size。那么如果我们750px的视觉稿需要显示成640px呢,我们只需要把font-size对应的缩小就可以了。其他的各种的屏幕,只需要等比例缩放就好了。

js+sass计算方案

简单JS动态设置font-size(简单demo,如有需要最好加上DomContentLoaded和orientationchange的监听):

fnResize();
window.addEventListener("resize", function() {
fnResize()
}, false);
function fnResize(){
var docWidth = document.documentElement.clientWidth,
body = document.getElementsByTagName('html')[0];
body.style.fontSize = docWidth / 32 + 'px';
}

sass:

@function rem($px){
@return $px*(1/20)*1rem;
} .ty_con{
minwidth: rem(300); /* 15rem */
}

rem问题及解决方案

问题:

部分安卓机rem计算出来的font-size总是要比预期要大一些或者小一些:华为,魅族......(小数保留问题)这样会导致最后的计算是不准确的。

解决方案1:

1,在css的使用上宽度布局尽量使用百分比,flex和box-sizing来做,减少宽度计算误差产生的问题。

2,icon雪碧图的图标之间留白,在写宽度的时候多写几像素使图标居中。

解决方案2:

在每次计算完页面的fontSize后,对某个实际元素的大小进行判断,如果对比原来的比例有0.2以上的出入,那就用这个比例去重新设置页面的fontSize。如果是正常情况,就不会执行页面fontSize重新这一步。至此,问题也算是解决了。

解决方案3:

直接使用Flexible实现手淘H5的终端适配

当然还有一些其他的方案这里就不提了解决方案4,解决方案5.。。。。

有兴趣的同学可以看下Flexible的解决方案:

使用Flexible实现手淘H5页面的终端适配:

http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

github地址:https://github.com/amfe/lib-flexible

移动端Web适配单位rem的坑你知道多少 :http://www.jianshu.com/p/8300a5ec6480

关于移动端 rem 布局的一些总结:

https://segmentfault.com/a/1190000003690140

网页单位和rem小分享的更多相关文章

  1. 网页title旁边的小图片

    网页title旁边的小图片设置,图片格式必须是.ico <link rel="icon" href="img/logo.ico" type="i ...

  2. 70.JS---利用原生js做手机端网页自适应解决方案rem布局

    利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...

  3. 给网页标题添加icon小图标

    so easy: 给网页标题添加icon小图标: 直接在html文件的head部分添加下面代码(注意href的路径): <link rel="icon" type=" ...

  4. 分享一个刷网页PV的python小脚本

    下面分享一个小脚本,用来刷网页PV. [root@huanqiu ~]# cat www.py #!/usr/bin/python# coding: UTF-8import webbrowser as ...

  5. 自适应PC端网页制作使用REM

    做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的 ...

  6. 尺寸单位em,rem,vh,vw

    这几天做demo,看了网上教程有用到尺寸单位vh,vw, 这些单位不是很熟悉,所以上网上找了些资料来认识了这些不认识的单位 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于 ...

  7. css网页单位

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 移动端:UI图px单位转换rem单位的计算方法

    简单说一下 em em 单位是相对于父元素字体大小来去定的.比方说: font-size:12px; 元素宽度是2em; 那么实际的宽度是 24px.(具体为什么,可以去查询资料,今天主讲rem) 简 ...

  9. js小分享

    之前实现一些js代码时,总觉得无法下手,所以最近在学习一下特别细的知识点,分享笔记.嘻嘻,偷个小懒,我把自己的笔记拍个照片就不打字了.嘎嘎,放心放心,自觉得字写的还算ok的啦- 表示家里的老弟玩游戏, ...

随机推荐

  1. video标签

    Video标签的使用 Video标签含有src.poster.preload.autoplay.loop.controls.width.height等几个属性, 以及一个内部使用的标签<sour ...

  2. C# 泛型集合

    原文出处我的wiki,转载请说明出处 考虑到泛型在集合类型中的广泛应用,这里一起讨论. 1. 泛型 1.1 泛型的定义与约束 创建泛型方法.委托.接口或类时,需要在名称后增加尖括号及其中的泛型参数,泛 ...

  3. bookStore项目总结

    感想 该项目是目前为止,我写过代码量最多的项目了-..虽然清楚是没有含金量的[跟着视频来写的],但感觉自己也在进步中-.. 写的过程中,出了不少的问题-..非常多的Servlet,JSP看得眼花-.. ...

  4. Javascript-正则表达式-开发中的使用.

    -- "(-1~99)之间 -1表示无限次!" pattern="^((-1)|([0-9]{0,2}))$" -- "(0~99.99)之间 的金额 ...

  5. 添加事务后 org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type available

    今天遇到了一个奇怪的问题   在没添加事务之前  所有的代码都是好的 , 当我添加了事务之后, 代码报错 org.springframework.beans.factory.NoSuchBeanDef ...

  6. day12<常见对象+>

    常见对象(Scanner的概述和方法介绍) 常见对象(Scanner获取数据出现的小问题及解决方案) 常见对象(String类的概述) 常见对象(String类的构造方法) 常见对象(String类的 ...

  7. HTML5基本标签的使用

    第一次写这种东西,肯定存在许多不足之处,还望大家多多担待,我会继续加油的!我也是一名HTML5的初学者,只是将这几周在课堂上所听到的东西分享给大家. 下面给大家介绍一下H5! 一.<!DOCTY ...

  8. Highway Networks Pytorch

    导读 本文讨论了深层神经网络训练困难的原因以及如何使用Highway Networks去解决深层神经网络训练的困难,并且在pytorch上实现了Highway Networks. 一 .Highway ...

  9. mybatis枚举映射成tinyint

    第一步:定义顶级枚举接口 public interface BaseEnum<E extends Enum<?>, T> { public T getCode(); publi ...

  10. MyCAT-EYE开源

    MyCAT EYE MySQL数据库监控工具,实现了对MySQL节点的管理和监控,可供开发人员和DBA使用.后续版本将整合MyCAT2.0的管理和配置. 演示地址: 开发人员视图:http://120 ...