css 移动端布局(一)

2017-06-16 本文已影响0人常连海

布局方式总结:
float(浮动) 、 position（定位i）、table-cell(转表格)、flex(弹性盒)、

你的html跟文档字体设置为 10px; html {font-size: 62.5%;} ==> 62.5%*16 = 10 (1rem = 10px)
设计稿的宽度，高度，边框，一切大小都除以20,在进行设置rem (以iphone6为基准) 设计稿的宽度为750px, 750/2/10 除以2先把他缩小一半，和苹果6的屏幕一样大，在除以10，是把px单位转为remd单位
那么你的字体例如设置 span { font-size: 1.4rem; } 其实就是 1.4rem * 10 = 14px; 因为html跟字体是10px;

3.表格移动端布局核心：

 1） 父div的display:table;  因为他已经为table了，所以设置宽度为100% (table, 100%俩个属性必须) 对于那些流白，因为没有设置宽和高度，所以我们用padding属性来撑开， 最好不要设置高度给他,适应就可以了 .container{ padding: 1rem 2rem; display: table; width: 100%;vertical-align: middle; }
 
 2)  子div设置为display:table-cell  这样他就拥有了表格那些特性，可以用vertical-align: middle;
      .left {display: table-cell;vertical-align:center;text-align:center; width:2rem; height:3rem;box-sizing: borer-box;(css3盒子模型,加padding保证盒子不外扩);font-size:1.4rem;(下面的子元素字体大小会继承)}
 
 3) 对应左右子div，一般有一个是自适应的，来适应屏幕的宽度，另一个设置宽度来固定，可以设置高度
     .right {display: table-cell;vertical-align:center;text-align:center;}

4.字体最小不能小于1.2rem,一般是1.4rem
5.移动端初始化样式

a,b,body,canvas,dd,div,dl,dt,em,form,h1,h2,h3,h4,h5,h6,html,img,input,label,li,ol,p,q,span,ul{
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size-adjust:none;
  -webkit-text-size-adjust:100%!important;
  -webkit-touch-callout:none;
}
*{-webkit-tap-highlight-color:transparent; padding: 0; margin: 0;}
input, textarea, keygen, select, button {font-size: 1.4rem}
extarea:disabled, input:not([type]):disabled, input[type="color" i]:disabled, input[type="date" i]:disabled, input[type="datetime" i]:disabled, input[type="datetime-local" i]:disabled, input[type="email" i]:disabled, input[type="month" i]:disabled, input[type="password" i]:disabled, input[type="number" i]:disabled, input[type="search" i]:disabled, input[type="tel" i]:disabled, input[type="text" i]:disabled, input[type="time" i]:disabled, input[type="url" i]:disabled, input[type="week" i]:disable {
  background-color: transparent; color: #888
 }
 
body,html{
    font-size:62.5%;   //---->>这里跟字体大小设为10px(62.5%*16 = 10)  1rem = 10px
    height:100%;
    padding:0;margin:0;
    background-color:#fff;
    font-family:'Microsoft YaHei';
}

input{-webkit-user-select:auto;-webkit-appearance:none;appearance:none;outline:0;}

::-webkit-input-placeholder{color:#999;}

li,ul{list-style:none;}

a{text-decoration:none; color: #4c4c4c;}

em{font-style:normal;}

.show{display:block!important;}

.hide{display:none!important;}

.bold{font-weight:bold!important;}

.fixed{position: fixed!important;}
.fl {float: left;}

.fr {float: right;}

.bdn{border: none!important;}

.cb{clear: both!important;}

 html,body{width:100%;max-width:768px;margin:0 auto;}
 
.mg_body_bggrey{ background-color: #f2f2f2 }

.mw_main{clear: both; border-bottom: 5rem solid transparent; background:#f2f2f2;}

.mw_new_loading{
   font-size:1.4rem;
   line-height:3rem;
   height:3rem;
   display:block;
   text-align: center;
   color: #898c8d;
}

html {-ms-touch-action: none;}

6.转表格布局一般用于:
1)左右两列 (一个定宽，一个去自适应，高度都用padding撑开)

左中右 (一般是左右定宽，中间去自适应)

7.图片解释

table_layout1.png

table_layout2.png

table_layout3.png

table_layout4.png

table_layout5.png

table_layout6.png

table_layout7.png

table_layout8.png

table_layout9.png

table_layout10.png

table_layout11.png

table_layout12.png

6.注意

7.display:table-cell用法
1). display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签
2). 我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价值的，
3). 与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。
对于不认识display:table-cell属性的IE6/7呢？哦呵呵，很简单，使用display:inline-block属性代替display:table-cell就完全ok的啦！display:table-cell; *display:inline-block;
作用：
A--->>display:table-cell与大小不固定元素的垂直居中
B--->>display:table-cell与两栏自适应布局
C--->>display:table-cell与三栏自适应布局
D--->>display:table-cell下的等高布局
父元素设置display:table;
左右两边都没有设置宽度，默认他们平分父元素的宽度，各占50%
左右两边有一侧设置宽度，另一测没有设置宽度，那么没有设置那一侧是自适应的(对于右侧是背景图的必须设置高度，才能撑开背景图片，右侧是文字的话就不需要了，padding即可)
三栏布局，一般左右固定，中间自适应即可

移动端布局使用table-cell
布局

其他详解:

css 移动端布局(一)

猜你喜欢

热点阅读