引用js，自动算字体大小,响应式布局

<script>
　　var iScale = 1;
　　iScale = iScale / window.devicePixelRatio;
　　document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '">');

　　/* 动态设置字体大小*/
　　function htmlFontSizeChange() {
　　　　var iWidth = document.documentElement.clientWidth;
　　　　document.getElementsByTagName('html')[0].style.fontSize = iWidth / 16 + 'px';
　　　　console.log("1rem = " + iWidth / 16);
　　}
　　htmlFontSizeChange();
　　$(window).resize(function() {
　　　　htmlFontSizeChange();
　　});

</script>

<style>

　　body{

　　　　font-size:1rem; /*(16px)/(iWidth/16)　　(iWidth设计图宽)*/

　　}

</style>

示例

<!DOCTYPE html>
　　<html>

　　<head>
　　<meta charset="UTF-8">
　　<title></title>
　　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
　　<script>
　　　　var iScale = 1;
　　　　iScale = iScale / window.devicePixelRatio;
　　　　document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '">');

　　　　/* 动态设置字体大小*/
　　　　function htmlFontSizeChange() {
　　　　　　var iWidth = document.documentElement.clientWidth;
　　　　　　document.getElementsByTagName('html')[0].style.fontSize = iWidth / 16 + 'px';
　　　　　　console.log("1rem = " + iWidth / 16);
　　　　}
　　　　htmlFontSizeChange();
　　　　$(window).resize(function() {
　　　　　　htmlFontSizeChange();
　　　　});
　　</script>
　　<style>
　　span {
　　　　font-size: 0.21333333rem;
　　　　/*设计图大小为1200，16/(1200/16)*/
　　　　/*font-size: 16px;*/
　　}

　　div {
　　　　width: 0.4rem;
　　　　/*30/(1200/16)*/
　　　　/*width: 30px;*/
　　　　background: red;
　　　　height: 0.4rem;
　　}
　　</style>
　　</head>

　　<body>
　　　　<span>设计图宽度为1200</span>
　　　　<div></div>
　　</body>

</html>

直接使用css设置rem

html{

　　font-size:62.5%; /* 10÷16=62.5% */

}

body{

　　font-size:12px;

　　font-size:1.2rem ; /* 12÷10=1.2 */

}

媒体查询

@media only screen and (min-width: 481px){

　　html {

　　　　font-size: 94%!important;/* 15.04÷16=94% */

　　}

}

@media only screen and (min-width: 561px){

　　html {

　　　　font-size: 109%!important; /* 17.44÷16=109% */

　　　}

}

@media only screen and (min-width: 641px){

　　html {

　　　　font-size: 125%!important;/* 20÷16=125% */

　　}

}

引用来自 http://www.520ued.com/article/53e98eafbb16a74c41b5de77

rem字体响应式布局的更多相关文章

  1. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

  2. rem+js响应式布局的设置

    直接调用代码即可,不过不同屏幕宽度要求会不同,相应修改一下就ok了 // rem响应式布局 (function(){ var html=document.querySelector('html') h ...

  3. rem在响应式布局中的应用

    rem/em/px/pt的基友关系 px 像素相对长度单位,相对于显示器屏幕分辨率而言 em 相对长度单位,根据其父元素来设置字体大小 pt point,是印刷行业常用单位,等于1/72英寸 rem ...

  4. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  5. 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配

    Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...

  6. 自适应布局，响应式布局以及rem,em区别

    一.自适应和响应式 先说共同点: 两者都是因为越来越多的 移动设备( mobile, tablet device )加入到互联网中来而出现的为移动设备提供更好的体验的技术.用技术来使网页适应从小到大( ...

  7. 移动端响应式布局--你不知道的CSS3.0媒体查询，解决rem部分情况下无法适配的场景

    媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...

  8. 【学习笔记】响应式布局的常用解决方案（媒体查询、百分比、rem、和vw/vh）

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

  9. CSS3移动端vw+rem不依赖JS实现响应式布局

    1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...

随机推荐

  1. 矩阵乘法的MapReduce实现

    对于任意矩阵M和N,若矩阵M的列数等于矩阵N的行数,则记M和N的乘积为P=M*N,其中mik 记做矩阵M的第i行和第k列,nkj记做矩阵N的第k行和第j列,则矩阵P中,第i行第j列的元素可表示为公式( ...

  2. 贪吃蛇游戏C语言源代码学习

    源代码下载地址为:www.clang.cc 阅读学习了源代码,并做了简单的注释和修改,里面只用了链表数据结构,非常适合C语言入门者学习阅读. 程序可在VS2013下编译运行. #include< ...

  3. 8.openssl req

    数字证书申请和生成工具.也可以为根CA自行签署证书. 该命令中很多值.属性.格式或默认值都在config文件openssl.cnf中指定. [root@xuexi ~]# man req NAME r ...

  4. Windows下用Python 3.4+自带的venv模块创建虚拟环境

    Python 3.4+自带了venv模块,用于创建虚拟环境,每个虚拟环境都可以安装一套独立的第三方模块. 本文在Windows 10上操作. 1.创建一个虚拟环境: D:\>mkdir test ...

  5. 学会Git玩转Github

    1. 了解Git和Github 1.1 什么是Git Git是一个免费.开源的版本控制软件 1.2 什么是版本控制系统 版本控制是一种记录一个或若干个文件内容变化,以便将来查阅特定版本修订情况得系统. ...

  6. Count(*)或者Count(1)或者Count([列]) 区别

    在SQL 中Count(*)或者Count(1)或者Count([列])或许是最常用的聚合函数.很多人其实对这三者之间是区分不清的.本文会阐述这三者的作用,关系以及背后的原理. 往常我经常会看到一些所 ...

  7. Myeclipse2016部署tomcat服务（别的服务类似）配置环境

    1.在工具MyEclipse的项目管理菜单中,右单机找Properties或者快捷键alt+enter,(或者直接搜索Runtimes)myEclipse/Targeted Runtimes 2.ne ...

  8. postgres 批量更新内容

    在程序中遇到这样的需求, 数据库表格式如下 需要把批量更新status, 如name = fox 时, status = 1, name = boa 时,status = 2 .... 类似的 pos ...

  9. jQuery 取消事件冒泡 阻止后续内容执行 闭包函数 (学习笔记)

    1.取消事件冒泡 <title>取消事件冒泡</title> <style> div { border:solid 1px black; } </style& ...

  10. Mac OS X的空间去哪儿了

    记得有事儿没事儿看下,/cores/目录的大小. cores目录是存放程序dump的数据,对于绝大部分人时是没有用的.可以删除.如果遇到坑爹的程序,一直生成dump文件,硬盘瞬间就爆满了. 典型:An ...