移动端布局和pc端写法

一：移动端准备工作

2. 
   

 

 

 

 

 

 

 允许全屏模式浏览,隐藏浏览器导航栏-->

 
     
     
     

2. 
   

二：pc端准备工作

2.  
   

    

   
   

三：base.css公共样式pc端

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；border: 0;}

ol,li,ul,dl,dt,dd{list-style:none;}

table{border-collapse:collapse;border-spacing:0}

h1,h2,h3,h4,h5,h6,i,strong {font-weight: normal;}  

img {vertical-align: middle;border: none;width: 100%;}  
i {font: inherit;}  

a {color: #fff;text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color:transparent;}

a:hover {text-decoration: underline; outline: none;}  

select::-ms-expand { display: none; }  

a:active,a:hover{outline:0}

.clearfix::before,
.clearfix::after{
    content: '';
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;

}

.fl{ float:left;}
.fr{float:right;}

input,select,option{vertical-align:middle;border-radius:0px;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);outline: none;}

input[type="text"],input[type="button"],input[type="submit"],input[type="reset"]{-webkit-appearance: none;appearance: none;border-radius: 0;outline: none;}  

.overflow {overflow:hidden; }  

四：base.css公共样式移动端

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;}
.fl {float: left;}  
.fr {float: right;} 

table{border-collapse:collapse;border-spacing:0}

html {  
    -webkit-text-size-adjust: 100%;  
    -ms-text-size-adjust: 100%;  
    /* 解决IOS默认滑动很卡的情况 */  
    -webkit-overflow-scrolling : touch;  
}  
  
/* 禁止缩放表单 */  
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; /* 不够的单词自动换行 而不会被截掉 */  
}  
.clearfix:after {  
    content: "";  
    display: block;  
    visibility: hidden;  
    height: 0;  
    clear: both;  
}  
.clearfix {  
    zoom: 1;  
}  
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';  
}  
/*单行溢出*/  
.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;  
}  
/* 移动端点击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;  
}  

.overflow {overflow:hidden; }

.w50{  
    width: 50%;  
}  
.w25{  
    width: 25%;  
}  
.w20{  
    width: 20%;  
}  
.w33{  
    width: 33.333333%;  

}  

五：移动端布局使用方法rem

第一种：js控制html字体大小， js代码放在head里面

 html设置初始font-size：320px的字体大小 

var html = document.getElementsByTagName('html')[0];

    if(html){
        var w = window.innerWidth;
        var fontSize = (w>640?640:w)/640 *30; 这里最少30，
        html.style.fontSize = fontSize + 'px';
    }
    window.onload = function(){
        window.onresize = function(){
            var w = window.innerWidth;
            console.log(w);
            var fontSize = (w>640?640:w)/640 * 30;这里最少30，
            html.style.fontSize = fontSize + 'px';
        }
    }

第二种：js控制html字体大小常用 ，js代码放在head里面

html设置初始font-size：320px的字体大小 

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

第三种：用媒体查询控制html字体大小

一：字体大小为15px开始 常用

  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

}

}

二：字体大小为13.65px 不常用

html {

font-size: 4.2vw;

/* rem(root element)配合vw(viewport width) */

}

html {

font-size: 13.65px

}

@media only screen and ( min-width: 320PX) and ( max-width: 360PX) {

html {

font-size: 13.65px

}

}

@media only screen and ( min-width: 360PX) and ( max-width: 375PX) {

html {

font-size: 15.36px

}

}

@media only screen and ( min-width: 375PX) and ( max-width: 390PX) {

html {

font-size: 16px

}

}

@media only screen and ( min-width: 390PX) and ( max-width: 414PX) {

html {

font-size: 16.64px

}

}

@media only screen and ( min-width: 414PX) and ( max-width: 460PX) {

html {

font-size: 17.664px

}

}

@media only screen and ( min-width: 460PX) and ( max-width: 640PX) {

html {

font-size: 20px

}

}

@media screen and ( min-width: 640PX) {

html {

font-size: 27.31px

}

}

六：移动端布局用flex和自动缩放

新旧版本兼容：这里设置flex容器为.box，子元素为.item

1、Flex 布局

.box{
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 display: -webkit-box;
 display: -moz-box;
}

旧版：display：box

新版：display：flex

2、定义主轴的方向

水平方向：

.box{
  -moz-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
}

垂直方向：

.box{
 -moz-flex-direction: column;
 -webkit-flex-direction: column;
 flex-direction: column;
 -webkit-box-direction: normal;
 -webkit-box-orient: vertical;
}

旧版：box-direction: normal 水平方向 | reverse 垂直方向 | inherit ，跟子元素的方向一致; 定义子元素的显示方向。

         box-orient: horizontal  水平排列| vertical 垂直排列| inline-axis 默认 | block-axis 快方式排列 | inherit继承父元素; 定义子元素是否应水平或垂直排列。

        这两种要同时设置才能确定排列方式；

        水平方向：box-direction: normal；box-orient: horizontal

        垂直方向：box-direction: normal； box-orient:vertical

新版：flex-direction：row（默认值）：主轴为水平方向，起点在左端。

                                 row-reverse：主轴为水平方向，起点在右端。
                                 column：主轴为垂直方向，起点在上沿。

                                 column-reverse：主轴为垂直方向，起点在下沿。

3、子元素主轴对齐方式 

.box{
 -moz-justify-content: center;
 -webkit-justify-content: center;
 justify-content: center;
 -webkit-box-pack: center;
}

旧版： box-pack: start | end | center | justify;

注意：兼容写法新版语法的space-around是不可用的 

新版：justify-content：flex-start（默认值）：左对齐

                                   flex-end：右对齐
                                   center： 居中
                                   space-between：两端对齐，项目之间的间隔都相等。

                                   space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

4、子元素交叉轴对齐方式

.box{
 -moz-align-items: center;
 -webkit-align-items: center;
 align-items: center;
 -webkit-box-align: center;
}

旧版： box-align: start | end | center | baseline | stretch;

新版：align-items：flex-start：交叉轴的起点对齐。
                              flex-end：交叉轴的终点对齐。
                              center：交叉轴的中点对齐。
                              baseline: 项目的第一行文字的基线对齐。
                              stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

5、子元素属性：子元素在水平或者垂直方向占几分

.item{
 -moz-flex: 1;
 -webkit-flex: 1;
 flex: 1;
 -webkit-box-flex: 1.0;
}

旧版：box-flex：1.0浮点数字

新版：flex：1 数字

6、超出要不要换行 不兼容，就是兼容了也无效

要求换行

.box{
 flex-wrap:wrap;
 box-lines: multiple;
}

旧版： box-lines: single默认不允许 | multiple 允许;

新版：flex-wrap: nowrap 不换行

                          wrap 换行，第一行在上方

                          wrap-reverse 换行，第一行在下方

7.新版的其他语法

01、行内元素也可以定义flex语法：不常用

.box{
  display: -webkit-inline-flex;
  display: inline-flex;
}：

02、父元素属性align-content属性 定义在多跟抽线的对齐方式，一般是换行以后的对齐方式，只有一条抽线改属性不生效，常用在换行以后有间距的问题：设置align-content：flex-start； 不常用

 align-content：flex-start：与交叉轴的起点对齐。
                         flex-end：与交叉轴的终点对齐。
                         center：与交叉轴的中点对齐。
                         space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
                         space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

                         stretch（默认值）：轴线占满整个交叉轴。

03、子元素属性flex，是flex-grow, flex-shrink 和 flex-basis的简写，一般只定义子元素占多少份，常用

04、子元素属性flex-grow 定义子元素占一行的多少份，值为数字  不常用

05、子元素属性flex-basis属性  定义了在分配多余空间之前，项目占据的主轴空间 像素单位和百分比，默认auto

06、子元素属性flex-shrink属性 定义了子元素的缩小比例，如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值无效

07、 子元素属性order属性  定义子元素的排列方式，数值越小，越靠前排列，数字

08、子元素属性align-self属性 定义允许单个项目有与其他项目不一样的对齐方式，会覆盖algin-items属性 不常用

        align-self: auto  默认  表示继承父元素           

                         flex-start  与交叉轴的起点对齐。

                         flex-end  与交叉轴的终点对齐。

                         center  与交叉轴的中点对齐

                         baseline: 项目的第一行文字的基线对齐。

                    stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

8、兼容无效： 

                justify-content: space-around 不能用

                flex-wrap: wrap 不能用

9、flex兼容的标准写法

-webkit-前缀标准版
-moz-前缀标准版
标准版
-webkit-前缀09版

示例：

.box{
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 display: -webkit-box;
 display: -moz-box;
}

10、新版的语法：

定义flex：

.box{
    display: -webkit-flex; /*webkit*/
    display: flex;
}
/*行内flex*/
.box{
    display: -webkit-inline-flex; /*webkit*/
    display:inline-flex;
}

父元素属性：

.box{
    flex-direction:    row      | row-reverse | column | column-reverse;
         /*主轴方向：左到右（默认） |   右到左    | 上到下 | 下到上*/

    flex-wrap:    nowrap   | wrap | wrap-reverse;
       /*换行：不换行（默认） | 换行 | 换行并第一行在下方*/

    flex-flow: <flex-direction> || <flex-wrap>;
     /*主轴方向和换行简写*/

    justify-content:   flex-start   | flex-end |   center | space-between | space-around;
        /*主轴对齐方式： 左对齐（默认） |  右对齐  | 居中对齐 |     两端对齐  | 平均分布*/

    align-items:         flex-start    | flex-end | center   | baseline       | stretch;
        /*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/

    align-content: flex-start      | flex-end | center   | space-between  | space-around | stretch;
        /*多主轴对齐：顶部对齐（默认） | 底部对齐   | 居中对齐  | 上下对齐并铺满  | 上下平均分布*/
}

子元素属性：

.item{
    order: <integer>; number
    /*排序：数值越小，越排前，默认为0*/

    flex-grow: <number>; /* default 0 */
    /*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/

    flex-shrink: <number>; /* default 1 */
    /*缩小：默认1（如果空间不足则会缩小，值为0不缩小）*/

    flex-basis: <length> | auto; /* default auto */
    /*固定大小：默认为0，可以设置px值，也可以设置百分比大小*/

    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    /*flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，*/

    align-self:         auto     | flex-start | flex-end | center   |  baseline      | stretch;
       /*单独对齐方式：自动（默认） | 顶部对齐   | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
}

七：移动端布局用百分比和自动缩放布局