rem字体响应式布局
引用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字体响应式布局的更多相关文章
- 理解rem实现响应式布局原理及js动态计算rem
前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...
- rem+js响应式布局的设置
直接调用代码即可,不过不同屏幕宽度要求会不同,相应修改一下就ok了 // rem响应式布局 (function(){ var html=document.querySelector('html') h ...
- rem在响应式布局中的应用
rem/em/px/pt的基友关系 px 像素相对长度单位,相对于显示器屏幕分辨率而言 em 相对长度单位,根据其父元素来设置字体大小 pt point,是印刷行业常用单位,等于1/72英寸 rem ...
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配
Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...
- 自适应布局，响应式布局以及rem,em区别
一.自适应和响应式 先说共同点: 两者都是因为越来越多的 移动设备( mobile, tablet device )加入到互联网中来而出现的为移动设备提供更好的体验的技术.用技术来使网页适应从小到大( ...
- 移动端响应式布局--你不知道的CSS3.0媒体查询，解决rem部分情况下无法适配的场景
媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...
- 【学习笔记】响应式布局的常用解决方案（媒体查询、百分比、rem、和vw/vh）
原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...
- CSS3移动端vw+rem不依赖JS实现响应式布局
1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...
随机推荐
- MYSQL 中 update set from where 问题
MySQL 和 SQLSERVER不一样,update set from 一张表的时候 应该改为 UPDATE TABLE_AA INNER JOIN TABLE_BB ON TABLE_AA.ID ...
- Python自动化 【第十一篇】：Python进阶-RabbitMQ队列/Memcached/Redis
本节内容: RabbitMQ队列 Memcached Redis 1. RabbitMQ 安装 http://www.rabbitmq.com/install-standalone-mac.htm ...
- MySQL效能监控工具mysqlreport安装和中文说明
管理 mysql 最让人困扰的就是如何有效的掌握 MySQL 的健康状况,因为 MySQL 虽然有提供许多系统变量值供您参考,但这些零散的数据若要手动搜集与过滤将会是一件十分没有效率的事情(除非您写 ...
- UIViewController中addChildViewController的作用
当在一个ViewController中添加一个子ViewController时,UI部分可以直接通过addSubView的方法添加,例如: 在一个ViewControllerA中添加ViewContr ...
- 关于odbc的彻底删除问题
最近在装一个软件,由于第一次安装产生了一个错误,于是我尝试在卸载之后,重新进行安装~但是,在安装过程当中出现了一个问题. NEWLRE ODBC data source already exists. ...
- Elasticsearch升级1.5版本暴露jdk的bug
把测试环境的Elasticsearch升级到1.5.1版本,启动的时候报错: [root@node2 elasticsearch-1.5.1]# bin/service/elasticsearch s ...
- linux 学习 软件工具
_____secureCRT 远程通信工具 第二行第二个快速连接,输入主机名,即ip地址,和用户名,root .其它默认:端口22,协议ssh2,防火墙 none. 保存会话,连接.需要输入用户密码. ...
- C# 采用事务批量插入数据
首先要构建一个实体类,注意实体类的属性和数据的列要一一对应,否则会报错. public class Animal { public string Name { get; set; } public i ...
- 照片灰蒙蒙？用PS的曲线功能来解决 （转）
原文地址:http://realjasonc.blog.163.com/blog/static/16475932520107594048957/ 上次,给大家看了几张较为典型的直方图.其实直方图的状态 ...
- win7系统部分便笺的元数据已被损坏怎么恢复
解决Windows7系统打开便笺:部分便笺的元数据已被损坏,便笺已将其恢复为默认值.这个问题! Windows7下有一部分系统打开便笺就会报出以下情况 其实这个方法很好解决! 我们需要重新注册一下下面 ...