px ,em ,rem

做移动端或者响应式的页面必然需要字体的变化的。这次我就自己的经验来说说他们之间的关系,以及怎么用。

px (绝对单位)是我们常用的就不说了。

em(相对单位,相对父级)

em 指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font -size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

CSS代码
html { font-size: 62.5%; }

这个换算在IE浏览器下不成立,1.2em会比12px稍大一些,解决办法是把html标签样式中的62.5%改成63%,即:
CSS代码
html { font-size: 63%; }  

注:(有一点不懂的是)

你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em= 1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。

所以这个用的时候会有点问题

rem(相对单位 ,css3,相对根),在ie8及ie8以下的版本不支持外其他浏览器都支持,如果你要考虑ie8及一下,最好把px也写上。

我们设置html的字体大小的值为html{font-size: 87.5%;(也就是14px)。然后其他的字体就是将你要的值除以14得到的值

你根元素的字体大小选62.5%,那px和rem之间的换算就是px直接除以10就得到rem了。

 

这里我就不负责任说一句,这里是看到别人写的,我自己还没哟用过,不知道什么样。

javascript方式,通过上面的公式,计算出基准值rem,然后写入样式,大概如下(代码参考自kimi的m-base模块)

var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
scale = 1 / dpr;
dpr = win.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
// 设置viewport,进行缩放,达到高清效果
metaEl.setAttribute('content''width=' + dpr * docEl.clientWidth + ',
                     initial-scale=' + scale + ',maximum-scale=' + scale + ',
                     minimum-scale=' + scale + ',user-scalable=no');
// 设置data-dpr属性,留作的css hack之用
docEl.setAttribute('data-dpr', dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
// 给js调用的,某一dpr下rem和px之间的转换函数
window.rem2px = function(v) {
    v = parseFloat(v);
    return v * rem;
};
window.px2rem: function(v) {
    v = parseFloat(v);
    return v / rem;
};
window.dpr = dpr;
window.rem = rem;

这种方式,可以精确地算出不同屏幕所应有的rem基准值,缺点就是要加载这么一段js代码,但个人觉得是这是目前最好的方案了。

因为这个方案同时解决了三个问题:

1)border: 1px问题

2)图片高清问题

3)屏幕适配布局问题

 

推荐网页:http://www.cocoachina.com/webapp/20150715/12585.html

转载于:https://www.cnblogs.com/zxhh/p/6872318.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/372152.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用JAnnocessor生成Java代码

在本文中,我将向你展示如何生成的代码JAnnocessor通过创建框架Nikolche Mihajlovski 。 在Nikolche的演讲中,我第一次在GeeCON 2012大会上遇到JAnnocessor: “创新和实用的Java源代码生成” (幻灯片) 。 之后&#xff…

Linq学习笔记(转)

开始Linq前你要知道的 扩展方法 顾名思义就是对现有类进行扩展的的方法,扩展方法可以在不修改现有类的情况下,为现有类增加公共的接口(不是C#中的interface)。 扩展方法本质上是一个静态方法,不同之处在于它的第一个参…

cass展点不在原位置,cass中打开一副图后,通过绘图处理-——展高程点,怎么之前的图形就不显示了,,只剩下高程点!!...

答:1、进入控制面板,选择“卸载或更改程序”。 2、选中“AutoCAD2006”图标。 3、右击选择“更改”。 4、进入“AutoCAD2006安装程序对话框”,选择“添加/删除功能”单选按钮,点击下一步。 5、在“程序文件”列表中,选…

(二)windows下安装PHPCMS V9

一、准备工作 搭建环境 :参考:Windows下搭建PHP开发环境及相关注意事项PHPCMS V9 :下载适合自己 PHPCMS V9 版本到本地或服务器,下载地址:http://www.phpcms.cn/html/download/说明:官方提供了 2 种不同的编码。包括 G…

JavaFX 2.0布局窗格– HBox和VBox

如果要对JavaFX 2.0中所有不同的布局窗格进行概述,或者想了解有关它们的一些基本知识,请参阅我以前的文章《 JavaFX 2.0中的布局窗格》 。 布局窗格HBox和VBox绝对是JavaFX 2.0中最基本的布局容器。 如您所知,它们的用途是将所有子级布置在一…

flask mysql分页,Flask分页的实现方法

所需环境Flask-SQLAlchemy分页使用Flask-SQLAlchemy提供的pagination()方法。页数是pagination()方法的第一个参数,也是唯一必须的参数。可选参数per_page用来指定每页显示的记录数。参考代码:def index():# ...page request.args.get(page, 1, typeint…

Java中的生成器设计模式

Java 中的 Builder设计模式是一种创建模式,即用于创建对象,类似于 工厂方法设计模式 ,这也是创建设计模式。 在学习任何设计模式之前,我建议先找出特定设计模式要解决的问题。 众所周知, 必要性是发明的母亲。 在没有面…

验证码( 随机数)

方式一&#xff08;变色版&#xff09;&#xff1a; <html> <head><meta charset"UTF-8"/><title></title><script src"jquery-2.0.2.min.js"></script> </head> <body> <?php header("co…

单片机串行通信全解析

1.什么是串行通信&#xff1f; 串行通信&#xff08;英语&#xff1a;Serial communication&#xff09;是指在计算机总线或其他数据通道上&#xff0c;每次传输一个位元数据&#xff0c;并连续进行以上单次过程的通信方式。与之对应的是并行通信&#xff0c;它在串行端口上通过…

java type 类型,java中的泛型类型与Type接口

假设我们定义了一个Room的类&#xff0c;表示一个房间public classRoom(){}由于我们建造好房间是&#xff0c;不知道房间以后的用途&#xff0c;他可能用来住人&#xff0c;也有可能用来放货物&#xff0c;因此需要用到泛型。但是我们可能想获取Room这个房间里面进来的的东西的…

centos7下操作防火墙

引言 最近使用centos7系统比较频繁&#xff0c;在配置服务器的时候&#xff0c;总是遇到能够ping通服务器&#xff0c;但是就是没有办法访问80端口&#xff0c;这个时候我的直觉告诉我&#xff0c;肯定是防火墙的原因&#xff0c;但是使用iptables却怎么都找不到命令&#xff0…

其他团队对本团队评价的总结

我们小组在看了其他小组的评价后&#xff0c;对自己的程序有了新的看法。转载于:https://www.cnblogs.com/bk1246788/p/6879691.html

Java:使用Fork / Join框架的Mergesort

此项的目的是显示一个Fork / Join RecursiveAction的简单示例&#xff0c;而不是过多地研究合并合并的可能优化方法&#xff0c;或者比使用Exkutor / Join Pool优于现有的基于Java 6的现有实现&#xff08;例如ExecutorService&#xff09;的相对优势。 以下是使用Java的自上而…

php的异常处理方式,php异常处理基本方法

当一个php脚本运行时&#xff0c;为了防止脚本运行崩溃&#xff0c;亦或是当php作为webserver&#xff0c;为了防止php程序出错&#xff0c;抛出httpcode500错误&#xff0c;我们常常需要对php程序做异常处理。今天介绍的是最基本的异常处理方法&#xff1a;一般而言&#xff0…

关系型数据库的三范式

第一范式:确保每列的原子性. 如果每列(或者每个属性)都是不可再分的最小数据单元(也称为最小的原子单元),则满足第一范式. 例如:顾客表(姓名、编号、地址、……)其中"地址"列还可以细分为国家、省、市、区等。第二范式:在第一范式的基础上更进一层,目标是确保表…

vray学习笔记(3)-多维子材质是个什么东西

多维子材质是个什么东西&#xff1f;为什么出现这个概念&#xff1f; 在3dsmax官方网站&#xff0c;我们可以看到它的定义&#xff1a; The Multi/Sub-Object material lets you assign different materials at the sub-object level of your geometry. 意思是多维子材质这个概…

Hello JavaFX 2.0:命令行介绍

我从博客文章Hello JavaFX 2.0&#xff1a;NetBeans 7.1 beta的介绍中&#xff0c;从NetBeans 7.1 beta的角度看了一个无处不在的Hello World示例的简单JavaFX版本。 在本文中&#xff0c;我将介绍仅使用命令行工具通过JavaFX实现的Hello World版本。 JavaFX 2.0 API文档包括ja…

matlab空格会消失了,如何在Matlab中自动删除保存的尾随空格?

我有同样的需求,并写了一个小脚本来做一些接近的事情.将以下内容放在MATLAB desktop shortcut中.每当您单击快捷方式按钮时,它将从编辑器中的活动文件中删除尾随空格.不如在保存时自动执行它 – 你需要记住在保存之前按下按钮 – 但差不多.测试在11b,12a和13b,但在12b也应该没问…

object to 字符串json

1 package com.beijxing.TestMain;2 3 import com.beijxing.entity.Student;4 import com.google.gson.Gson;5 import com.google.gson.annotations.SerializedName;6 7 /** 8 * 9 * author 作者 : ywp 10 * version 创建时间&#xff1a;2016年10月30日 下午9:21:33 11 */ 12…

JS 对象(Object)和字符串(String)互转

var jsObj {}; jsObj.testArray [1,2,3,4,5]; jsObj.name CSS3; jsObj.date 8 May, 2011; var str JSON.stringify(jsObj); var str1 JSON.parse(str); var str2 JSON.stringify(str1);alert(str);alert(str1); alert(str2);对象拷贝&#xff1a;var newObj JSON…