1.流式布局
定义：就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
这样的布局方式 就是移动web开发使用的常用布局方式
2.viewport(视口)
视觉窗口，简称：视口；
使用方式：
<meta name="viewport" content="width=device-width">
content :可设置参数
width： | 宽度设置的是viewport宽度，可以设置device-width特殊值(一般设置成device-width)
initial-scale： | 初始缩放比，大于0的数字
maximum-scale： | 最大缩放比，大于0的数字
minimum-scale： | 最小缩放比，大于0的数字
user-scalable： | 用户是否可以缩放，yes或no（1或0）；（一般设置成no）
基本使用代码：
<meta name="viewport" content="width=device-width,initial-scale=1.0，user-scalable=0">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
使用快捷键： meta:vp+tab 可快捷生成；
网页适配的两种方式
方式一：（主流方式）
<meta name="viewport" content="width=device-width,initial-scale=1.0，user-scalable=0">
方式二：使用js判断（淘宝使用）
window.onresize = function () {
responsive();
};
responsive();
function responsive() {
console.log("非常消耗性能的代码");
if (client().width > 960) {//是电脑
document.body.style.backgroundColor = "red";
document.body.innerHTML = "computer";
} else if (client().width > 640) {//是平板
document.body.style.backgroundColor = "green";
document.body.innerHTML = "tablet";
} else {//手机
document.body.style.backgroundColor = "yellow";
document.body.innerHTML = "mobile";
}
}
function client() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
};
}
然后，在js中动态设置 viewport 设置缩放比
3.移动端基础属性css设置
1.高亮显示
/* -webkit-tap-highlight-color: transparent;*//*透明 其实就是不显示颜色*/
-webkit-tap-highlight-color: red;
代码演示：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>
<title></title>
<style>
body,html{
padding: 0;
margin: 0;
}
a{
display: block;
height: 100px;
width: 100px;
/*怎么定义高亮的颜色*/
/* -webkit-tap-highlight-color: transparent;*//*透明 其实就是不显示颜色*/
-webkit-tap-highlight-color: red;
}
</style>
</head>
<body>
<a href="javascript:;">gdfgdfg</a>
</body>
</html>
演示效果：
2017_02_08_11_37_05_37.gif
注意：此属性只有在移动端有效
2.设置box-sizing
/*设置所有的盒子的宽度以边框开始计算*/
-webkit-box-sizing: border-box;
/*要兼容webket浏览器内核厂商 这种情况一般是老的移动端浏览器*/
box-sizing: border-box;
演示代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>
<title></title>
<style>
body,html{
padding: 0;
margin: 0;
}
div{
width: 100%;
height: 200px;
background: #00ff00;
border: 20px solid red;
padding:0 20px;
-webkit-box-sizing: border-box;
}
ul,ol{
list-style:none;
}
a{
text-decoration: none;
color:#333;
}
a:hover{
colo:#333;
}
input,textarea{
border:none;
outline:none;
resize:none;/*不允许用户调整元素大小拉伸。*/
-webkit-appearance:none; /* 清除浏览器默认的属性*/
}
</style>
</head>
<body>
<div></div>
<input type="search">
</body>
</html>
效果展示:
2017_02_08_11_41_34_632.gif
3.清除浏览器给input自带的样式
/*特殊的属性定义 清除浏览器给input自带的样式*/
-webkit-appearance: none;/*组建默认的样式为空*/
4.基础公共样式
//清除浮动
.f_left{
float: left;
}
.f_right{
float: right;
}
.clearfix::after,
.clearfix::before{
content: ".";
line-height: 0;
height: 0;
display: block;
visibility: hidden;
clear: both;
}
公共.base.css样式：
/*reset css 重置默认的一些样式 浏览器自带的 目的是保持各种终端显示一致*/
/*所有的标签和伪类 before after*/
*,
::before,
::after{
padding: 0;
margin: 0;
/*在移动端特殊的设置 */
/*点击高亮效果*/
-webkit-tap-highlight-color: transparent;
/*设置所有的盒子的宽度以边框开始计算*/
-webkit-box-sizing: border-box;
/*要兼容webket浏览器内核厂商 这种情况一般是老的移动端浏览器*/
box-sizing: border-box;
}
body{
font-size: 14px;
color: #333;
font-family: "MicroSoft YaHei","sans-serif";/*是设备默认的字体*/
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color: #333;
}
a:hover{
color: #333;
}
input,textarea{
border: none;
outline: none;
resize: none;
/*特殊的属性定义 清楚浏览器给input自带的样式*/
-webkit-appearance: none;/*组建默认的样式为空*/
}
/*common css 也就是我们共用的css*/
.f_left{
float: left;
}
.f_right{
float: right;
}
.clearfix::after,
.clearfix::before{
content: ".";
line-height: 0;
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.m_r10{
margin-right: 10px;
}
.m_l10{
margin-left: 10px;
}
.m_t10{
margin-top: 10px;
}
.m_b10{
margin-bottom: 10px;
}
.mianColor{
color: #d8505c;
}
网友评论