介绍
这篇文章主要介绍了css3中媒体响应式布局的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋,来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。随着技术的发展css3的特性也被广泛应用开来,它的很多新标签也非常好用而且非常容易学习,就像css3的响应式布局也是非常6的,原本只能在pc端显示的网页现在可以通过@media的加入就可以把一个网页变成响应式了,电脑端也可以移动端也可以真是伸缩自如啊,例如呢
& lt; ! DOCTYPE html>,,
& lt; html>,,
,,,& lt; head>,,
,,,,,,,& lt; meta charset=癠TF-8"祝辞,,
,,,,,,,& lt; title> & lt;/title>,,
,,,& lt;/head>,,
,,,& lt; style>,,/*,,,,小于200 px */,,,
,,,,,,,@media only screen 以及(max-width: 200 px ), {,,
,,,,,,,,,,,# p {,,
,,,,,,,,,,,,,,,背景:,红色,,,,
,,,,,,,,,,,},,,
,,,,,,,},,,/*,,,,大于300 px */,,,
,,,,,,,@media only screen 以及(min-width: 300 px ), {,,
,,,,,,,,,,,# p {,,
,,,,,,,,,,,,,,,背景:,黄色的,,,,
,,,,,,,,,,,},,,
,,,,,,,},,,
,,,,,,,,,,
,,,& lt;/style>,,
,,,& lt; body>,,
,,,,,,,& lt; p id=皃"在小于200 px背景变红色大于300 px背景为黄色& lt;/p>,,
,,,& lt;/body>,,
& lt;/html> 代码的效果
@media可以用于单条件也可以用于双条件例如:
& lt; ! DOCTYPE html>,,
& lt; html>,,
,,,& lt; head>,,
,,,,,,,& lt; meta charset=癠TF-8"祝辞,,
,,,,,,,& lt; title> & lt;/title>,,
,,,& lt;/head>,,
,,,& lt; style>,,/*,,,,小于200 px */,,,
,,,,,,,@media (min-width: 200 px ),以及(max-width: 500 px ), {,,
,,,,,,,,,,,# p {,,
,,,,,,,,,,,,,,,背景:,红色,,,,
,,,,,,,,,,,},,,
,,,,,,,},,,
,,,& lt;/style>,,
,,,& lt; body>,,
,,,,,,,& lt; p id=皃"在200 px以上并且500 px以下背景变成红色& lt;/p>,,
,,,& lt;/body>,,
& lt;/html> 这段代码小于200 px或者大于500 px不显示效果
简单的一个@media就实现了响应式页面,是不是非常容易,
自己随便做的一个页面这是在450 px以上的页面效果
这是450 px以下的页面效果
总体做法就是将每一块div响应式缩到450 px以下的时候每个div的宽度为100%
高度为汽车,我在写这个网页的时候遇到一个小小的问题,做到页面底部的时候底部导航飞了,它没有安安分分的落在底部而是在中间,我在这里分享一下小小的知识点那就是我最后的解决方法,只需要给底部的div一个风格样式,明确:都这样底部就会安安分分的固定到下面了,在媒体里还会有横屏和竖屏的响应式,竖屏为@media(方向:肖像)
竖屏为@media(方向:景观)这样就可以适配横屏和竖屏了,媒体的优势非常多例如我们在创建自己的简历的时候可以利用响应式布局这样我们的机会岂不是大了很多,人力资源也有可能会在手机上看到你的简历这个时候机会可能就悄悄的来到你的身边呢
感谢你能够认真阅读完这篇文章,希望小编分享的“css3中媒体响应式布局的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!
