话不多说直接上主体:
1、加在网页头部,让网站自适应宽度。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
|
width=device-width width为设置layout viewport 的宽度,为一个正整数,”width-device”表示宽度是设备屏幕的宽度
initial-scale=1.0 initial-scale为设置页面的初始缩放值,可以是一个带小数的数字,1.0就是占网页的100%
minimum-scale=1.0 表示最小的缩放比例
maximum-scale=1.0 表示最大的缩放比例
user-scalable=no 表示用户是否可以调整缩放比例,值为”no”或”yes”
2、width:auto; / width:XX%;(父元素一定要有宽度)宽度使用百分比,不要适应绝对值
3、字体使用相对大小的rem,而不是px;
4、加载CSS
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css" />
|
如果屏幕宽度小于600像素(max-device-width: 600px),就加载css600.css文件。
如果屏幕宽度在600像素到980像素之间,则加载css600-980.css文件
5、图片自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
body{
background: url(images/bg.png) no-repeat;
background-size:100% 100%;
background-attachment: fixed;
}
.container{
width: 100%;
text-align: center;
position: absolute;
top: 96px;
}
.container img{
transform: scale(0.8);
height: auto;
width: auto\9;
}
#img1{
width: 100%;
position: absolute;
bottom: 10px;
margin-bottom: 40%;
transform: scale(0.9);
/*background: yellowgreen;*/
}
#img2{
width: 100%;
position: absolute;
bottom: 20px;
margin-bottom: 12%;
transform: scale(0.9);
}
</style>
</head>
<body>
<div class="container">
<img src="images/logo@2x.png" alt="" />
</div>
<input type="image" src="images/iOS@2x.png" id="img2"/>
<input type="image" src="images/Android@2x.png" id="img1"/>
</body>
</html>
|