移动端用rem实现 和 用jq实现的两种方法

随着现在移动端越来越方便，项目中移动端的web页面也越来越多。除了用Bootstrap这种自适应的前端开发工具包，经常用到的就是rem布局和jq实现两种方法。rem结合了css3的media媒体查询，同时我必须要说的是felx布局，用起来真的觉得很方便。方便，方便，方便，重要的事情说三遍。

1、先来讲rem布局，rem是指相对于根元素的字体大小的单位。总结出的媒体查询字体如下。

/* 移动端定义字体的代码 */
body{
font-family:Helvetica,Microsoft YaHei;"微软雅黑";
-ms-user-select: none;
-webkit-user-select: none;
-webkit-text-size-adjust: none;
-o-user-select: none;
}
html { font-size: 50px; }
body { font-size: 24px;}
@media screen and (max-width: 359px) {
html { font-size: 25px;}
body { font-size: 12px; }
}
@media screen and (min-width: 360px) {
html { font-size: 28.13px;}
body { font-size: 12px; }
}
@media screen and (min-width: 375px) {
html { font-size: 29.30px;}
body { font-size: 14px; }
}
@media screen and (min-width: 384px) {
html { font-size: 30px;}
body { font-size: 14px; }
}
@media screen and (min-width: 400px) {
html { font-size: 31.25px;}
body { font-size: 15px; }
}
@media screen and (min-width: 414px) {
html { font-size: 32.34px;}
body { font-size: 16px; }
}
@media screen and (min-width: 424px) {
html { font-size: 33.13px;}
body { font-size: 16px; }
}
@media screen and (min-width: 480px) {
html { font-size: 37.50px;}
body { font-size: 18px; }
}
@media screen and (min-width: 540px) {
html { font-size: 42.19px;}
body { font-size: 20px; }
}
@media screen and (min-width: 640px) {
html { font-size: 50px;}
body { font-size: 24px;}
}

1. 用jq根据视口进行对字体进行计算 从而以计算来的根元素的字体大小用rem转换

var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 750) deviceWidth = 750;
document.documentElement.style.fontSize = deviceWidth /7.5 + ‘px’;

3、jq实现。利用meta标签的scale进行缩放。这种方法比较简单，px数值按照设计图上的数值来写。但是，如果碰到插件之类的样式就会很麻烦。

// JavaScript Document
function mobile(){
var a=$(window).width(),
        b=$(window).height(),
        d=1080,
        c=1920,
        meta=$("#meta");
if(b*d/a >= c){
        meta.attr("content","width=1080, initial-scale="+a/d+", minimum-scale="+a/d+", maximum-scale="+a/d+", user-scalable=no");
    }else{
        meta.attr("content","height=1920, initial-scale="+b/c+", minimum-scale="+b/c+", maximum-scale="+b/c+", user-scalable=no");
    }

}

window.onload=function(){
    mobile();
}

注意：其中1080和1920的数值分别为设计稿的宽和高。

4、flex布局。对以上两种方法都可以同时结合flex布局来实现。

/* ============================================================
 flex：定义布局为盒模型
 flex-v：盒模型垂直布局
 flex-1：子元素占据剩余的空间
 flex-align-center：子元素垂直居中
 flex-pack-center：子元素水平居中
 flex-pack-justify：子元素两端对齐
 兼容性：ios 4+、android 2.3+、winphone8+
 ============================================================ */
/*使用注意：
flex下的子元素必须为块级元素，非块级元素在android2.3机器下flex失效
flex下的子元素宽度和高度不能超过父元素，否则会导致子元素定位错误，例如水平垂直居中*/
.flex{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
}
.flex-v{
-webkit-box-orient:vertical;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
}
.flex-1{
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
}
.flex-align-center{
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
}
.flex-pack-center{
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
}
.flex-pack-justify{
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
}
.flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}