手机布局rem的使用(rem)
最后一堆代码是举例的全码.
一 直接<head>标签里套用以下,其他都不用
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750*100 + "px";
window.addEventListener("resize",function(){
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750*100 + "px";
},false);
</script>
早就听说布局总共约4种:
静态布局 , 流式布局 , 响应式布局 , 自适应布局(以下是解释和区别 , 不敢保证正确 , 但个人认同)
静态布局:
根据固定宽度, 完成布局,在屏幕的分辨率不同 , 显示也不同;
流式布局:
当浏览器宽度小于多少时怎么显示布局 ;当浏览器宽度大于多少时, 怎么显示布局 ; 展示的方向像水流一样,一部分一部分的加载 ,额不知道花瓣网是不是就算;
响应式和自适应的共同点:
都是自动检测设备, 根据设备的不同 ,自动采用不同的css ,而且css都是采用的百分比等单位 ,而不是固定的宽度单位;
响应式和自适应的不同点:
在不同设备上看上去不同;
响应式会随设备的改变而响应改变布局的样式;
自适应是在所有设备上看都是固定的样式 ,好像采用一个模板一样;
二 参考
本篇有大部分摘抄大神的http://www.cnblogs.com/mufc-go/p/4625115.html ,谢谢无偿分享 .
代码有更新,最好直接查看github
github:https://github.com/finance-sh/adaptive
adaptivejs利用rem解决移动端页面开发的自适应问题
页面模板初始化的时候不用设置viewport标签,由js生成。
我们在head标签的顶部引入js,按以下方法使用即可
adaptivejs原理:
利用rem布局,根据公式
html元素字体大小 = document根节点(html)宽度 * 100 / 设计图宽度
计算html元素的font-size,使1rem等于100px,方便快速开发
开发时,一个div设计图宽度为89px,那么在css中我们可以这样书写:width:0.89rem;
如果是文字,我们也建议使用rem
对于iphone的retina高清显示屏,基本版本(adaptive.js)我们做了缩放处理,以达到最佳显示效果。 对于快速开发版本(adaptive-version2.js),viewport的width等于设备宽度,不会缩放
以下是
adaptivejs
var adaptive = {};
(function (win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
// 设备像素比
var devicePixelRatio = win.devicePixelRatio;
// 我们设置的布局视口与理想视口的像素比
var dpr = 1;
// viewport缩放值
var scale = 1;
// 设置viewport
function setViewport() {
// 判断IOS
var isIPhone = /iphone/gi.test(win.navigator.appVersion);
if (lib.scaleType === 2 && isIPhone || lib.scaleType === 3) {
dpr = devicePixelRatio;
}
// window对象上增加一个属性,提供对外的布局视口与理想视口的值
win.devicePixelRatioValue = dpr;
// viewport缩放值,布局视口缩放后刚好显示成理想视口的宽度,页面就不会过长或过短了
scale = 1 / dpr;
// 获取已有的viewport
var hasMetaEl = doc.querySelector('meta[name="viewport"]');
var metaStr = 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no';
if (dpr === 1) {
metaStr = 'width=device-width, '.concat(metaStr);
}
if (!isIPhone && dpr !== 1) {
metaStr = metaStr.concat(', target-densitydpi=device-dpi');
}
// 如果有,改变之
if (hasMetaEl) {
hasMetaEl.setAttribute('content', metaStr);
}
// 如果没有,添加之
else {
var metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', metaStr); if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
}
else {
var containDiv = doc.createElement('div');
containDiv.appendChild(metaEl);
docEl.appendChild(containDiv);
}
}
} var newBase = 100;
lib.errDpr = 1; function setRem() {
// 布局视口
// var layoutView = docEl.clientWidth; 也可以 获取布局视口的宽度
var layoutView;
if (lib.maxWidth) {
layoutView = Math.min(docEl.getBoundingClientRect().width, lib.maxWidth * dpr);
}
else {
layoutView = docEl.getBoundingClientRect().width;
}
// 为了计算方便,我们规定 1rem === 100px设计图像素,我们切图的时候就能快速转换
// 有人问,为什么不让1rem === 1px设计像素呢?
// 设计图一般是640或者750px
// 布局视口一般是320到1440
// 计算一个值,使layout的总宽度为 (desinWidth/100) rem
// 那么有计算公式:layoutView / newBase = desinWidth / 100
// newBase = 100 * layoutView / desinWidth
// newBase = 介于50到200之间
// 如果 1rem === 1px 设计像素,newBase就介于0.5到2之间,由于很多浏览器有最小12px限制,这个时候就不能自适应了
newBase = 100 * layoutView / lib.desinWidth * (lib.errDpr || 1);
docEl.style.fontSize = newBase + 'px';
// rem基准值改变后,手动reflow一下,避免旋转手机后页面自适应问题
doc.body&&(doc.body.style.fontSize = lib.baseFont / 100 + 'rem');
// 重新设置rem后的回调方法
lib.setRemCallback&&lib.setRemCallback();
lib.newBase = newBase;
}
var tid;
lib.desinWidth = 750;
lib.baseFont = 28;
// 局部刷新的时候部分chrome版本字体过大的问题
lib.reflow = function() {
docEl.clientWidth;
};
// 检查安卓下rem值是否显示正确
function checkRem() {
if (/android/ig.test(win.navigator.appVersion)) {
var hideDiv = document.createElement('p');
hideDiv.style.height = '1px';
hideDiv.style.width = '2.5rem';
hideDiv.style.visibility = 'hidden';
document.body.appendChild(hideDiv);
var now = hideDiv.offsetWidth;
var right = lib.newBase * 2.5;
if (Math.abs(right / now - 1) > 0.05) {
lib.errDpr = right / now;
setRem();
}
document.body.removeChild(hideDiv);
}
}
lib.init = function () {
// resize的时候重新设置rem基准值
// 触发orientationchange 事件时也会触发resize,故不需要再添加此事件了
win.addEventListener('resize', function () {
clearTimeout(tid);
tid = setTimeout(setRem, 300);
}, false);
// 浏览器缓存中读取时也需要重新设置rem基准值
win.addEventListener('pageshow', function (e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(setRem, 300);
}
}, false);
// 设置body上的字体大小
if (doc.readyState === 'complete') {
doc.body.style.fontSize = lib.baseFont / 100 + 'rem';
checkRem();
}
else {
doc.addEventListener('DOMContentLoaded', function (e) {
doc.body.style.fontSize = lib.baseFont / 100 + 'rem';
checkRem();
}, false);
}
setViewport();
// 设置rem值
setRem();
// html节点设置布局视口与理想视口的像素比
docEl.setAttribute('data-dpr', dpr);
};
// 有些html元素只能以px为单位,所以需要提供一个接口,把rem单位换算成px
lib.remToPx = function (remValue) {
return remValue * newBase;
};
})(window, adaptive);
if (typeof module != 'undefined' && module.exports) {
module.exports = adaptive;
} else if (typeof define == 'function' && define.amd) {
define(function() {
return adaptive;
});
} else {
window.adaptive = adaptive;
}
注意:如果设计图宽度大于document的宽度,0.01rem将小于1px,故如果设计图是1px,在css中仍然用1px显示。
可用的全局变量:window.devicePixelRatioValue 当前页面设置的设备像素比
优化宽度问题
新增最大宽度,解决平板或手机横屏时体验不佳的问题
window['adaptive'].maxWidth = 480; // 设置最大宽度,默认540px
需要css配合使用,添加如下代码:
body {
max-width: 6.4rem; // 设计图宽度为640px时为6.4rem ,750时为7.5rem ,以此类推
margin: 0 auto;
}
body * {
max-width: 6.4rem; // 设计图宽度为640px时为6.4rem ,750时为7.5rem ,以此类推
}
// 设计图宽度
window['adaptive'].desinWidth = 640;
// body 字体大小 会将body字体大小设置为 baseFont / 100 + 'rem' 750的设计图一般设置为28,640的设计图一般设置为24
window['adaptive'].baseFont = 24;
/*
// 显示最大宽度 可选
window['adaptive'].maxWidth = 480;
// rem值改变后执行方法 可选
window['adaptive'].setRemCallback = function () {
alert(1)
}
// scaleType 1:iphone andriod下viewport均无缩放 2:iphone下viewport有缩放,andriod没有 3:iphone andriod下viewport均有缩放; 默认值为1
window['adaptive'].scaleType = 1;
*/
// 初始化
window['adaptive'].init();
项目html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="no" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="css/yunxian.css"/>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/adaptive.js"></script>
<script src="js/yunxian.js"></script>
<script>
window['adaptive'].desinWidth = 750;
window['adaptive'].baseFont = 28;
window['adaptive'].maxWidth = 480;
window['adaptive'].scaleType = 2;
window['adaptive'].init();
</script>
<title>车险</title>
</head>
<body>
<form action="" method="post">
<div class="yx1">
<div class="yx1_menu">
选择行驶证类型
</div>
<div class="yx1_con">
<span>
<img id="checkimg1" src="img/chose1.png"/> 个人
</span>
<span>
<img id="checkimg2" src="img/chose2.png"/> 企业
</span>
</div>
</div>
<div class="yx_personal">
<div class="yx_pl">
</div>
<div class="yx_pr">
<div class="yx_prcon1">
投保人 <input type="text" placeholder=" 公司名称或姓名" />
</div>
<div class="yx_prcon1">
身份证号 <input class="idnummer" type="text" placeholder=" 机构请填写组织机构代码证" />
</div>
<div class="yx_prcon1" style="border:none ;">
地址 <input type="text" placeholder=" " />
</div>
</div>
</div>
<div class="yx_car">
<div class="yx_cl">
</div>
<div class="yx_cr">
<div class="yx_crcon1">
<span class="menu_safe">是否首次投保 </span>
<div class="yx_crcon11">
<span>
<img id="yx_crcon_yes" src="img/chose1.png"/> 是
</span>
<span>
<img id="yx_crcon_no" src="img/chose2.png"/> 否
</span>
</div>
</div>
<div class="yx_crcon1">
车牌号码 <input type="text"/>
</div>
<div class="yx_crcon1">
所有人/车主 <input type="text" class="yx_input3"/>
</div>
<div class="yx_crcon1">
品牌型号 <input type="text"/>
</div>
<div class="yx_crcon1">
发动机型号 <input type="text"/>
</div>
<div class="yx_crcon1">
车辆识别代码/VIN码/车架号 <input type="text" class="yx_input6"/>
</div>
<div class="yx_crcon1">
注册日期/初等日期 <input type="text" class="yx_input7"/>
</div>
<div class="yx_crcon1">
核定载人数 <input type="text" placeholder=" 输入货物数量 如:20吨 " />
</div>
<div class="yx_crcon1" style="border:none ;">
核定载质量/整备质量 <input type="text" class="yx_input9"/>
</div>
</div>
</div>
<div class="yx_safemenu">
<div class="yx_safemenul">
</div>
<div class="yx_safemenur">
<div class="yx_safemenucon">
投保险种 <a href="">
<input type="text" class="more" value=" XXXXXDDDDDDDD"/>
</a>
</div>
</div>
</div>
<div class="information">
<div class="load">
<img src="img/idcard1.png"/>
<div></div>
</div>
<div class="load">
<img src="img/idcard2.png"/>
<div></div>
</div>
<div class="load">
<img src="img/companycard.png"/>
<div></div>
</div>
<div class="load">
<img src="img/carcard.png"/>
<div></div>
</div>
</div>
<div class="deal">
<input type="checkbox" />
我已阅读并同意<a href="">《人保保险投保须知》</a>
</div>
<div class="submit">
<input type="submit" value="提交资料"/>
</div>
</form>
</body>
</html>
手机布局rem的使用(rem)的更多相关文章
- 流式布局&固定宽度&响应式&rem
我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法,例如:流式布局.限死宽度,还有就是通过响应式来做,但是这些方案都不是最佳的解决方法. 1.流式布局: ...
- 关于响应式、媒体查询和media的关系 、流媒体布局flex 和em rem像素的使用 我有一些废话要讲.....
一.什么是响应式 随着移动端越来遇火 网站的布局成为一个热议的话题 有的人喜欢用手机浏览网站.有的人喜欢用paid浏览网站.有人喜欢用电脑浏览网站 那么问题来了 我们怎么样才能使用一套css样式 完成 ...
- Html5移动端页面自适应布局详解(阿里rem布局)
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport ...
- 前端笔记之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
- 适用于移动设备弹性布局的js脚本(rem单位)
背景介绍 目前,随着移动设备的普及和4G网络的普及,web在移动端的占比已经远远超过PC端,各种H5页面推广页面,H5小游戏热度火爆.以前简单的使用px单位(没有弹性)的时代已经无法满足各位设计师和用 ...
- 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配
Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...
- rem布局和使用js rem动态改变字体大小,自适应
解决rem文字动态改变字体大小: <script> console.log(window.devicePixelRatio); var iScale = 1; iScale = iScal ...
- [移动端WEB] 移动端网站响应式布局之"rem",CSS3 rem使用方式
(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ' ...
- 移动端布局的思考和rem的设置
如下方法如有不正确的地方,欢迎指正 前提: 设置稿750px 目标:40px = 1rem js设置方法:(小于等于750屏幕等比缩放) ;(function (doc, win, undefined ...
随机推荐
- 设置TextFiled输入长度限制
#pragma mark - 显示超过11位不让输入 - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange: ...
- linux命令学习之:rm
rm命令可以删除一个目录中的一个或多个文件或目录,也可以将某个目录及其下属的所有文件及其子目录均删除掉.对于链接文件,只是删除整个链接文件,而原有文件保持不变. 注意:使用rm命令要格外小心.因为一旦 ...
- 微信小程序 循环列表添加点击事件和样式
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使 ...
- go语言sync包的学习(Mutex、WaitGroup、Cond)
package main; import ( "fmt" "sync" "runtime" "time" ) //加锁, ...
- Dom,pull,Sax解析XML
本篇随笔将详细讲解如何在Android当中解析服务器端传过来的XML数据,这里将会介绍解析xml数据格式的三种方式,分别是DOM.SAX以及PULL. 一.DOM解析XML 我们首先来看看DOM(Do ...
- c++中“箭头(->)”和“点号(.)”操作符的区别
首先介绍一下C++中的结构.对于一个结构: struct MyStruct { int member_a; }; 如果有个变量MyStruct s,那么使用其中的成员元素时可以用: s.member_ ...
- Oracle_SQL(3) DML增删改
sql语言按功能分为:数据定义语言DDL.数据操纵语言DML.数据查询语言DQL.数据控制语言DCL 一.数据操纵语言DML1.insert 新增 语法:insert into <表名> ...
- vue组件中this和$el指向
示例代码为element ui 源码的select组件源码 控制台输出: 结论: this指向组件的实例. $el指向当前组件的DOM元素.
- activiti5.22整合modeler时出错TypeError: Cannot read property 'split' of undefined
activiti5.22.0整合modeler时,打开的流程页面不显示工具栏和左边的控件栏,产生如下的错误: TypeError: Cannot read property 'split' of un ...
- SparkStreaming 监控文件目录
SparkStream 监控文件目录时,只能监控文件内是否添加新的文件,如果文件名没有改变只是文件内容改变,那么不会检测出有文件进行了添加. )) )).reduceByKey(_ + _) word ...