媒体查询:根据屏幕大小,然后显示相对应的样式
/*媒体查询*/
/*最小的宽度是1200px,那么就是大于1200px*/
@media only screen and (min-width:1200px ) {
.main{
background: springgreen;
}
}
/*最大的宽度是1200px,小于1200px都适用于这里*/
@media only screen and (max-width:1200px ) {
.main{
width: 100%;
}
}
/*
大于min-width的宽度,小于max-width宽度
* */
@media only screen and (min-width: 960px) and (max-width: 1200px) {
.main{
width: 100%;
}
}
1)媒体查询 @media 是个好东西,至少对像我一样刚入行的小前端做响应式是个不错的选择。
①我们来看看媒体查询 页面最大宽度的标准写法
@media screen and (max-width: 960px){
body{
background: #000000;
font-size:14px;
...
}
}
解读下代码意思:当页面宽度小于960px时,使用以下对应样式表.
备注:screen 意思是告知设备在打印页面时使用无衬线体,屏幕上显示也用无衬线字体,现在你会去打印一张网页吗?不会吧!所以目前网站都不会考虑用户去打印网站页面,so...screen可以不用写,直接省去.
②这是媒体查询 页面最小宽度的标准写法
@media screen and (min-width:960px){
body{
background:#000000;
font-size:14px;
...
}
}
代码意思:当页面宽度大于960px时,使用以下对应样式表.
③当然我们也可以媒体查询一个页面区间宽度,
@media screen and (min-width:960px) and (max-width:1200px){
body{
background:#000000;
font-size:14px;
...
}
}
上面代码大概意思是:当页面宽度大于960px,小于1200px时([960px,1200px]),使用以下样式表.
④ 媒体查询的其他参数
以上是我们在开发过程中常用到的三种媒体查询特性小于、大于、等于,除此之外她还有其他特性,下面是我查找总结媒体查询的其他参数和用法.
2)媒体查询的"局限性"
我要说的这个局限性,指的是它不能用在IE8以下,IE8以下就不说了,它目前应该被前端骂的是 身残志坚了,IE8以下了 既不支持HTML5,也不支持CSS3的媒体查询,这个怎么搞...IE8以下放弃算求,但是有些公司,用户又不多啊,非得要求你小前端要响应式IE8以下,还好可以在项目中导入Respond.js,这样使用CSS3的媒体查询就有作用了,对于这个Respond.js,小生没实打实的用过,在这里闲扯了下,分享一篇知乎上关于这个Respond.js用法的文章给大家:https://www.zhihu.com/question/21634225
3)实现响应式网页,不止CSS3的媒体查询能做
1. Bootstrap:
对于这些框架,我感觉都怕用,因为它里面所有标签的样式都有,你引用就好了,是节省了开发时间。对于我来说,有点难把握,做完移动端网站我就有点后悔用了它,要说,不管什么,会写源生的才是最Nice的.
2. JS监听视口宽度变化从而动态更换CSS样式表,达到最佳的响应式:
这种方式,应该是很多攻城狮都喜欢用的,因为它精确,对于代码冗余,后期维护这些都比较友好,你要知道,攻城狮一般都很强调用户体验的.
- End -
| 参考文章 |
1.https://www.cnblogs.com/webonline/p/webonline.html