html响应式布局教程,css3 media 响应式布局的简单实例

html>

/*    小于200px*/

@media (min-width:200px ) and (max-width:500px ) {

#p{

background: red;

}

}

200px以上并且500px以下背景变成红色

这段代码小于200px或者大于500px不显示效果

自己随便做的一个页面这是在450px以上的页面效果

这是450px以下的页面效果

总体做法就是将每一块div响应式缩到450px以下的时候每个div的宽度为100%

高度为auto，我在写这个网页的时候遇到一个小小的问题,做到页面底部的时候底部导航飞了,它没有安安分分的落在底部而是在中间,我在这里分享一下小小的知识点那就是我最后的解决方法,只需要给底部的div一个style样式  clear：both这样底部就会安安分分的固定到下面了,在media里还会有横屏和竖屏的响应式,[email protected](orientation:portrait)

[email protected](orientation:landscape)这样就可以适配横屏和竖屏了，media的优势非常多例如我们在创建自己的简历的时候可以利用响应式布局这样我们的机会岂不是大了很多,HR也有可能会在手机上看到你的简历这个时候机会可能就悄悄的来到你的身边呢

以上这篇css3 media 响应式布局的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持程序员学习网。

这就是微学网-程序员之家为你提供的"css3 media 响应式布局的简单实例"希望对你有所帮助.本文来自网络，转载请注明出处：http://www.weixuecn.cn/article/3753.html