工作中有时候会遇到，老板让你把早已开发好的PC端网站转成自适应网站。如果这种情况下重写CSS会变得非常麻烦，博主最烦的就是修改别人代码，修改代码就需要分析读懂对方的代码，对方的代码逻辑清晰可维护性高，还好一点，一旦代码混乱改起来非常麻烦。有那个时间不如自己重写一遍，要比改代码快的多。本文就说说怎么在不改原始代码结构的基础上，来实现网页布局响应式扩展开发。
准备工作
核心还是用到C3的媒体查询技术@media screen来解决这个问题，使用之前我们需要设置Meta标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
/**
参数解释：
width = device-width：宽度等于当前设备的宽度
height = device-height：高度等于当前设备的高度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
*/如果还要兼容IE8浏览器，那么需要引入html5shiv.js、respond.min.js来兼容H5标签和C3的媒体查询Media：
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->既然考虑到IE浏览器，光是上面两个JS还不够。因为一些电脑上IE浏览器即使升级到了IE9以上，浏览器的文档模式还是诡异的IE8。。。真是卧了个大槽，为了解决这种情况，我们需要设置下meta标签让浏览器使用最高文档模式：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
/**
如果想使用固定的IE版本，可写成：<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
*/还有更牛逼的写法
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">这里面属性有一个chrome=1，这个是Google Chrome Frame（谷歌内嵌浏览器框架GCF）。如果用户的电脑装了这个插件，就可以让IE无论在什么版本都使用Webkit引擎及V8引擎进行排版和运算；如果电脑没装，就会以IE最高文档模式显示
媒体查询Media写法
C3媒体查询media标准写法：
@media screen and (max-width: 960px){
body{
background: #000;
}
}代码解释：当前页面尺寸小于960px的时候，执行里面的CSS样式。screen表示设备打印网页时采用衬线字体，屏幕显示采用无衬线字体。如果你的网站不考虑页面打印时：
@media (max-width: 960px){
body{
background: #000;
｝
}浏览器尺寸等于960px代码
@media screen and (max-device-width:960px){
body{
background:red;
}
}结合使用方法
@media screen and (min-width:960px) and (max-width:1200px){
body{
background:yellow;
}
}代码解释：当浏览器宽度大于960px小于1200px的时执行里面的CSS。
Media参数
- width：浏览器可视宽度。
- height：浏览器可视高度。
- device-width：设备屏幕的宽度。
- device-height：设备屏幕的高度。
- orientation：检测设备目前处于横向还是纵向状态。
- aspect-ratio：检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
- device-aspect-ratio：检测设备的宽度和高度的比例。
- color：检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
- color-index：检查设备颜色索引表中的颜色，他的值不能是负数。
- monochrome：检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
- resolution：检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
- grid：检测输出的设备是网格的还是位图设备。
根据页面尺寸引入不同的CSS文件
要实现远古PC站转自适应的话，最简单的办法让网站根据不同的屏幕尺寸加载不同的CSS文件：
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">以上代码当浏览器宽度小于960px时，执行的样式文件。但是这个方法有个缺点，会增加页面http的请求次数。
页面结构
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
<link rel="shortcut icon" href="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- 当浏览器尺寸大于960px-->
<link rel="stylesheet" type="text/css" media="screen and (min-width:960px)" href="css/main.css">
<!-- 当浏览器尺寸小于960px-->
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="css/index.css">
<style>
<!-- 当浏览器尺寸大于960px 显示隐藏对应的元素-->
@media screen and (min-width:960px) {
.max {
display: block;
}
.min {
display: none;
}
}
<!-- 当浏览器尺寸小于768px 显示隐藏对应的元素-->
@media screen and (max-width:768px) {
.max {
display: none;
}
.min {
display: block;
}
}
</style>
</head>
<body>
<div class="max">
...
</div>
<div class="min">
...
</div>
</body>
</html>扩展
其实早在C2的时候就支持Media了，比如我们在link标签上设置打印网页时采用衬线字体
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
必须 注册 为本站用户， 登录 后才可以发表评论！