媒体查询

Posted 北宫多情剑

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了媒体查询相关的知识,希望对你有一定的参考价值。

今天帮别人做了一个兼容pc端和移动端的页面,正好温习了一下媒体查询的知识。

1、@media screen and ( max-width : 600px ){

  /*屏幕宽度<=600px的样式*/

}

2、@media screen and ( min-width : 600px )and (max-width : 1000px ){

  /*屏幕宽度600-1000px的样式*/

}

3、@media screen and ( min-width : 1000px ){

  /*屏幕宽度>=1000px的样式*/

}

 

??注意:今天写样式的时候发现先写好pc端最大的尺寸的样式,然后把适配小尺寸的代码放下面,这样只需把要改的样式写到里面小尺寸代码里;

 

以上是关于媒体查询的主要内容,如果未能解决你的问题,请参考以下文章

CSS媒体查询及其使用

媒体查询用法及常见媒体尺寸

CSS3媒体查询总结

聊聊最近接触的媒体查询!

媒体查询

媒体查询