移动端布局方案

页头设置

  • 移动端需要禁止用户缩放，否则体验非常差。
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- 设置在苹果手机上以应用模式启动时，是否全屏 -->
<meta name='apple-touch-fullscreen' content='yes' />
<!-- 是否识别手机号码、电子邮件、地址 等-->
<meta name="format-detection" content="telephone=no,email=no,address=no" />
<!-- 让360双核浏览器用webkit内核渲染页面 -->  
<meta name="renderer" content="webkit" />
<!-- 避免IE使用兼容模式 -->  
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1" />
<!-- 允许全屏模式浏览,隐藏浏览器导航栏-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 微信缓存 -->  
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<!-- 是否启动webapp功能，会删除默认的苹果工具栏和菜单栏。 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 这个主要是根据实际的页面设计的主体色为搭配来进行设置。 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 忽略页面中的数字识别为电话号码,email识别 -->
<meta name="format-detection"content="telephone=no, email=no" />
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

重置样式

  • 重置字体大小：使用语义标记不会影响样式
  • 重置块边距：只有在需要时才应用间距
  • 重置表格：表格数据只占用它所需的空间
  • 保留了行内间距：按钮和输入保持其默认布局
  • 设置边框的大小：边框和划线不会影响设置的尺寸
  • 设置响应的媒体元素：以便图像和嵌入与浏览器的宽度成比例
<link href="https://cdn.bootcss.com/minireset.css/0.0.2/minireset.min.css" rel="stylesheet">

初始化样式

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
    margin: 0;
    padding: 0;
}
body, button, input, select, textarea {
    font: 12px/1.5 tahoma, arial, \5b8b\4f53;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
}
address, cite, dfn, em, var {
    font-style: normal;
}
code, kbd, pre, samp {
    font-family: couriernew, courier, monospace;
}
small {
    font-size: 12px;
}
ul, ol {
    list-style: none;
}
a {
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-focus: none;
    -moz-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:hover {
    text-decoration: none;
    outline: none;
    background: none;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
sup {
    vertical-align: text-top;
}
sub {
    vertical-align: text-bottom;
}
legend {
    color: #000;
}
fieldset, img {
    border: 0;
}
button, input, select, textarea {
    font-size: 100%;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
input {
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    outline: none;
}

公共样式

body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0;padding:0;}
ol,li,ul,dl,dt,dd {list-style:none;}
table {border-collapse:collapse;border-spacing:0}
html {-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%; /* 解决IOS默认滑动很卡的情况 */-webkit-overflow-scrolling : touch;}
a {text-decoration: none; color: #fff; font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif;}
a:hover {text-decoration: none;  outline: none;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-family: 'Microsoft YaHei';}
img {border: none;}
input{font-family: 'Microsoft YaHei';}
/* 禁止缩放表单 */
input[type="submit"], input[type="reset"], input[type="button"], input {resize: none;border: none;}
/* 取消链接高亮  */
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
/* 设置HTML5元素为块 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/* 图片自适应 */
img {width: 100%;height: auto;width: auto\9; /* ie8 */-ms-interpolation-mode: bicubic;/*为了照顾ie图片缩放失真*/}
em, i {font-style: normal;}
/*禁用了文本的拖拉，尤其在谷歌下*/
textarea {resize:none;  }
/* 不够的单词自动换行 而不会被截掉 */
p {word-wrap:break-word; }
/* 移动端点击a链接出现蓝色背景问题解决 */
a:link,a:active,a:visited,a:hover {background: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;}
/*浮动设置*/
.fl {float: left;}
.fr {float: right;}
.clearfix {zoom: 1;}
.clearfix:after {content: "";display: block;visibility: hidden;height: 0;clear: both;}
/*单行溢出*/
.one-txt-cut{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
/*多行溢出 手机端使用*/
.txt-cut{overflow : hidden;text-overflow: ellipsis;display: -webkit-box;/* -webkit-line-clamp: 2; */-webkit-box-orient: vertical;}
.overflow {overflow:hidden; }
/*宽度设置*/
.w50{width: 50%;}
.w25{width: 25%;}
.w20{width: 20%;}
.w33{width: 33.333333%;}

使用Flex弹性布局

.flexinline{
    display: -webkit-inline-flex;
    display: inline-flex;
}
.flexbox{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-box;
    display: -moz-box;
}
.flexbox-row{
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
}
.flexbox-col{
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
}
.flexitem{
    -moz-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -webkit-box-flex: 1.0;
}
.flexwrap{
    flex-wrap:wrap;
    box-lines: multiple;
}
.flexitem-justify{
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-pack: center;
}
.flexitem-center{
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-align: center;
}

媒体查询

html {font-size: 15px}
html {font-size: 4.7vw;/* rem(root element)配合vw(viewport width)  */}
@media only screen and (min-width:320PX) and (max-width:359PX) {
    html {
        font-size: 15px
    }
}
@media only screen and (min-width:360PX) and (max-width:374PX) {
    html {
        font-size: 16.875px
    }
}
@media only screen and (min-width:375PX) and (max-width:389PX) {
    html {
        font-size: 17.5781px
    }
}
@media only screen and (min-width:390PX) and (max-width:400PX) {
    html {
        font-size: 18.75px
    }
}
@media only screen and (min-width:401PX) and (max-width:414PX) {
    html {
        font-size: 19.4063px
    }
}
@media only screen and (min-width:415PX) and (max-width:640PX) {
    html {
        font-size:22.5px
    }
}
@media screen and (min-width:641PX) {
    html {
        font-size: 30px
    }
}

使用REM控制布局单位

(function(doc,win){
    var docEl = doc.documentElement;
    var resize = "orientationchange" in window ? "orientationchange" : "resize";
    var calculate = function(){
        var clientWidth = docEl.clientWidth;
        if(!clientWidth){
            return;
        }
        docEl.style.fontSize = (clientWidth > 640 ? 640 :clientWidth)/320*20 + "px";
    };
    //不同浏览器对resize事件处理机制不同，使用定时器延迟处理resize回调函数以降低重复响应。
    var timer = null;
    var delay = function(){
        win.clearTimeout(timer);
        timer = win.setTimeout(calculate, 100);
    };
    //移动端无需考虑事件注册函数兼容性
    if(!doc.addEventListener){
        return;
    }
    //添加resize事件注册函数
    win.addEventListener(resize, delay, false);
    //DOMContentLoaded事件只在DOM文档树加载完毕后触发，因此延迟处理。
    doc.addEventListener("DOMContentLoaded", calculate, false);
})(document, window);

(function(doc, win, designWidth){
    var html = doc.documentElement;
    var resize = "orientationchange" in window ? "orientationchange" : "resize";
    var calculate = function(){
        var clientWidth = html.clientWidth;
        if(!clientWidth){
            return;
        }
        //若设备宽度超过设计稿宽度则按统一值计算
        html.style.fontSize = (clientWidth >= designWidth ? 100 : clientWidth/designWidth*100) + "px";
    };
    //不同浏览器对resize事件处理机制不同，使用定时器延迟处理resize回调函数以降低重复响应。
    var timer = null;
    var delay = function(){
        win.clearTimeout(timer);
        timer = win.setTimeout(calculate, 100);
    };
    //移动端无需考虑事件注册函数兼容性
    if(!doc.addEventListener){
        return;
    }
    //添加resize事件注册函数
    win.addEventListener(resize, delay, false);
    //DOMContentLoaded事件只在DOM文档树加载完毕后触发，因此延迟处理。
    doc.addEventListener("DOMContentLoaded", calculate, false);
})(document, window, 750);

背景图片缩放自适应

body{
    background-color: #0b0f34;
    background-image:url("/assets/stats/img/bg.png");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}
.main{
    padding:3rem 1.5rem 1.5rem 1.5rem;
    background-image:url("/assets/stats/img/wrapper-bg.png");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}
  • background-size:cover;设置背景基于容器大小伸缩
  • background-attachment:fixed;设置当内容高度大于背景图片高度时背景图片位置先对于viewport固定

文本字体缩放自适应

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 2,352评论 0赞 11
  • CSS3
    CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 3,887评论 1赞 13
  • 移动端布局方案 rem vw
    移动端布局方案 rem 示例 [ 方法1 ] 在谷歌浏览器中，打开任意模仿IPHONE的设备尺寸，查看body的宽...
    squidbrother阅读 1,015评论 0赞 0
  • 移动端布局方案汇总&&原理解析
    阿里flexible布局 - 版本1.x 该布局于 2017年8月9日被2.0版本取代 实现原理 假设（UI稿75...
    zhongmeizhi阅读 782评论 0赞 1
  • CSS3
    1、属性选择器：id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,679评论 0赞 7