移动端布局 rem,和px
1.rem布局,根据屏幕来计算rem,也就是意义上的适应屏幕,但是一些字体大小转换和计算有些复杂。
// rem 布局重定义
(function(){
$('html').css('font-size', ($(window).width() - 2) / 10);
var multiple = parseFloat($('html').css('font-size')) / ($(window).width() - 2) * 100;
if(multiple != 10){
$('html').css('font-size', ($(window).width() - 2) / multiple);
}
document.write('<meta name = "format-detection" content = "telephone=no">');
})();
2.360布局就是说把屏幕按照360的尺寸自动放大缩小,这样用px就可以兼容所有手机了。
(function (window, document, width) {
var content = "user-scalable=no,width=" + width;
if( window.PhoneSystem.name == "Android" && window.parseInt(window.PhoneSystem.version[0]) <= 4 && window.parseInt(window.PhoneSystem.version[1]) < 5) {
content += ",target-densitydpi=device-dpi";
}
content += ",initial-scale=" + window.screen.width / width;
content += ",minimum-scale=" + window.screen.width / width;
content += ",maximum-scale=" + window.screen.width / width;
var meta = document.createElement("meta");
meta.setAttribute("name", "viewport");
meta.setAttribute("content", content);
var head = document.getElementsByTagName("head")[0];
head.insertBefore(meta, document.getElementsByTagName("meta")[0]);
})(window, document, 360);
最新文章
- 1、B2BUA
- 51nod 1158 全是1的最大子矩阵
- 20145321 Git的安装使用及今后学习规划
- django http 403 错误
- cellspacing cellpadding
- hash表的创建
- js排序算法汇总
- [Git] 1、常用Git命令行总结(一)
- 入职第二天:使用koa搭建node server是种怎样的体验
- SQL Server SubString和charindex的用法
- SpringMVC教程3
- CentOS上安装seafile
- spring boot 热更新配置
- 4 vuex的安装
- dwr网上使用例子
- C# 类中索引器的使用
- [UE4]混合动画以及Try Get Pawn Owner、Get Velocity、VectorLength的使用
- go语言基础之append扩容特点
- 树莓派GPIO控制LED彩灯
- 基于html5和jquery的篮球跳动游戏
热门文章
- MySQL创建临时表
- vue.js层叠轮播
- luogu P4238 多项式求逆 (模板题、FFT)
- 如鹏网JAVA培训笔记1(晓伟整理)
- Font Awesome使用方法
- JQuery dom 操作总结
- Spring Boot上传文件
- [Javascript Crocks] Safely Access Object Properties with `prop`
- 4443: [Scoi2015]小秃玩矩阵|二分答案|匈牙利
- Marching squares &;amp; Marching cubes