流式布局：不受固定像素限制，并且内容向两侧填充，width=100%
网页--》viewport【默认宽度为980px】--》浏览器【将viewport进行缩放】
viewport【视口】：在移动端用来承载网页的这个区域，就是我们的视觉窗口，viewport（视口），这个区域是可以设置高度宽带，可以按照比例放大缩小
，而且能设置是否允许用户自行缩放！
-------------------------------------------------------------------------------------------------
//viewport只有移动端才能识别，写在最前面编码后面！
//viewport【默认宽度为980px】
//设置宽度，width =device-width:设置成和设备一样的宽度
//设置默认缩放比例，initial-scale=1.0 ：初始缩放比，大于0的数字
//设置是否允许用户自行缩放 user-scalable=0/1 【no/yes】
//maximum-scale:最大缩放比，大于0的数字
//minimum-scale:最小缩放比，大于0的数字
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
------------------------------------------
base.css
----------------------------------------
/* reset css */
*,
::before,
::after{
/*选择所有的标签*/
margin:0px;
padding:0px;
/*清除移动端默认的 点击高亮效果*/
-webkit-tap-highlight-color:transparent;
/*设置所有的都是以边框开始计算宽度 百分比*/
-webkit-box-sizing:border-box;/*兼容*/
box-sizing:border-box;
}
body{
font-size:14px;
font-family:"MicroSoft YaHei",sans-serif;/*设备默认字体*/
color:#333;
}
a{ color:#333,}
a:hover{ text-decoration:none;}
input{ border:none; outline:none;
/*清除移动端默认的表单样式*/
-webkit-appearance:none;
}
/* common. css */
.f_left{ float:left;}
.f_right{ float:right;}
.clearfix::before,
.clearfix::after{
content:"";
line-height:0;
display:block;
visibility:hidden;
clear:both;
}
------------------------------------------------------------
转载请注明原文地址: https://ju.6miu.com/read-662571.html
