css3media响应式布局实例

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含css3,media,响应式,布局等相关知识,佚名希望在学习及工作中可以帮助到您

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用"大势所趋"来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。随着技术的发展css3的特性也被广泛应用开来,它的很多新标签也非常好用而且非常容易学习,就像css3的响应式布局也是非常6的,原本只能在pc端显示的网页现在可以通过@media的加入就可以把一个网页变成响应式了,pc端也可以移动端也可以真是伸缩自如啊,例如呢

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
/* 小于200px*/
@media only screen and (max-width:200px ) {
#p{
background: red;
}
}
/* 大于300px*/
@media only screen and (min-width:300px ) {
#p{
background: yellow;
}
}
</style>
<body>
<p id="p">小于200px背景变红色大于300px背景为黄色</p>
</body>
</html>

这段代码的效果

@media可以用于单条件也可以用于双条件例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
/* 小于200px*/
@media (min-width:200px ) and (max-width:500px ) {
#p{
background: red;
}
}
</style>
<body>
<p

您可能想查找下面的文章:

相关文章

2017-08-06DIV实现简易漂浮层放置分页信息思路分享
2017-08-06HTML DIV+CSS制作通栏实例
2017-08-06一款纯css3实现的颜色渐变按钮的代码教程
2017-08-06那些不常用却很有的CSS小结
2017-08-06CSS3制作苹果风格键盘特效
2017-08-06.clearfix:after(清除浮动)中各个属性及值详细解说
2017-08-06CSS3实现银灰色动画效果的导航菜单代码
2017-08-06div+css无图边框圆角实现思路及代码
2017-08-06IE8 css overflow:hidden不起作用
2017-08-06一个通俗小故事告诉你溢出隐藏（overflow:hidden）失效的原因