css自媒体查询
2024-09-27 05:53:09
准备工作1:设置Meta标签
首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果:
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这段代码的几个参数解释:
width = device-width:宽度等于当前设备的宽度
initial-scale:初始的缩放比例(默认设置为1.0)
minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)
准备工作2:加载兼容文件JS
因为IE8既不支持HTML5也不支持CSS3 Media,所以我们需要加载两个JS文件,来保证我们的代码实现兼容效果:
- <!--[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]-->
准备工作3:设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)
现在有很多人的IE浏览器都升级到IE9以上了,所以这个时候就有又很多诡异的事情发生了,例如现在是IE9的浏览器,但是浏览器的文档模式却是IE8:
为了防止这种情况,我们需要下面这段代码来让IE的文档模式永远都是最新的:
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
不过我最近又发现了一个更给力的写法:
- <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
怎么这段代码后面加了一个chrome=1,这个Google Chrome Frame(谷歌内嵌浏览器框架GCF),如果有的用户电脑里面装了这个chrome的插件,就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算,无比给力,不过如果用户没装这个插件,那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上,不过不用也是可以的。
以上内容摘自http://blog.csdn.net/yuzhongkai/article/details/51041937
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
body{
background: red
}
@media screen and (min-width:600px) and (max-width:1200px){
body{
background: greenyellow
}
}
@media screen and (max-width:600px){
body{
background: rgb(47, 102, 255)
}
}
/* 页面宽度大于1200背景红色 1200-600绿色 小于600蓝色 */
</style>
</head>
<body>
</body>
</html>
常用的自媒体查询样式
特性名 | 值 | 应用场景 |
width min-width max-width |
显示区域的宽度(对打印机而言是打印表面) | 改变布局以适应非常窄(如手机)或非常宽的显示器。 |
height min-height max-height |
显示区域的高度 | 改变布局以适应非常长或非常短的显示器 |
device-width min-device-width max-device-width |
当前计算机或设备屏幕的宽度 (或打印输出时纸面的宽度) |
根据不同设备(如手机)调整布局 |
device-height min-device-height max-device-height |
屏幕或纸面的高度 | 根据不同设备(如手机)调整布局 |
orientation | landscape(横向)或portrait(纵向) | 根据设备的朝向调整布局 |
device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio |
显示区域的宽高比(1/1是正方形) | 根据窗口形状调整样式(问题可能比较复杂) |
color min-color max-color |
屏幕颜色的位深 (1位表示黑白,目前主流显示器都是24位) |
检查是否支持彩色输出(比如是不是黑白打印), 或者支持的颜色数量 |
样式表用法
index.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="1.css"">
<link rel="stylesheet" href="2.css" media="(max-width:800px)">
</head>
<body>
<div>
<ul>
<li>1是大哥,哈哈哈哈哈哈哈哈哈!</li>
<li>2是大哥,哈哈哈哈哈哈哈哈哈!</li>
<li>3是大哥,哈哈哈哈哈哈哈哈哈!</li>
<li>4是大哥,哈哈哈哈哈哈哈哈哈!</li>
<li>5是大哥,哈哈哈哈哈哈哈哈哈!</li>
<li>6是大哥,哈哈哈哈哈哈哈哈哈!</li>
<li>7是大哥,哈哈哈哈哈哈哈哈哈!</li>
<li>8是大哥,哈哈哈哈哈哈哈哈哈!</li>
</ul>
</div>
</body>
</html>
1.css
body{
margin:;
width: 100%;
}
div{
text-align: center;
margin: auto
}
ul{
display: flex;
list-style: none;
justify-content: center;
flex-wrap:nowrap
}
li{
line-height: 30px;
background: red;
width: 300px;
margin: 20px;
font-size: 30px
}
2.css
body{
margin:;
width: 100%;
}
div{
text-align: center;
margin: auto
}
ul{
display: flex;
list-style: none;
justify-content: center;
flex-wrap:wrap
}
li{
line-height: 30px;
background: rgb(25, 0, 255);
width: 300px;
margin: 20px;
font-size: 10px
}
最新文章
- 【转】Xen与XenServer的区别
- (五)适配器模式-C++实现
- Chrome浏览器插件
- jQuery为啥要提供一个load()方法?
- ORA-12170: TNS:Connect timeout occurred
- 关于Android路由的实现
- nginx的The page you are looking for is temporarily unavailable错误解决办法
- SystemParametersInfo调置壁纸、屏幕保护程序
- scrapy的Middleware
- 洛谷P1101 单词方针
- svn 的add 和 commit
- 微信公众号开发之如何一键导出微信所有用户信息到Excel
- RPC好,还是RESTful好?
- 剑指offer四十七之求1+2+3+...+n
- spring配置datasource
- Gaussian Models
- No such file or directory 8356:error:02001003:system library:fopen:No such process:crypto\bio\bss_file.c:7 4:fopen
- 简单记录一次ORA-00600: internal error code, arguments: [2662]
- extjs4.0 treepanel节点的选中、展开! 数据的重新加载
- CAD参数绘制直径标注(网页版)