css3 media 响应式布局的简单实例


Posted in HTML / CSS onAugust 03, 2016

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title></title>  
  6.     </head>  
  7.     <style>  
  8. /*    小于200px*/   
  9.         @media only screen and (max-width:200px ) {   
  10.             #p{   
  11.                 background: red;   
  12.             }   
  13.         }   
  14. /*    大于300px*/   
  15.         @media only screen and (min-width:300px ) {   
  16.             #p{   
  17.                 background: yellow;   
  18.             }   
  19.         }   
  20.            
  21.     </style>  
  22.     <body>  
  23.         <p id="p">小于200px背景变红色大于300px背景为黄色</p>  
  24.     </body>  
  25. </html>  

代码的效果css3 media 响应式布局的简单实例css3 media 响应式布局的简单实例

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title></title>  
  6.     </head>  
  7.     <style>  
  8. /*    小于200px*/   
  9.         @media (min-width:200px ) and (max-width:500px ) {   
  10.             #p{   
  11.                 background: red;   
  12.             }   
  13.         }   
  14.     </style>  
  15.     <body>  
  16.         <p id="p">200px以上并且500px以下背景变成红色</p>  
  17.     </body>  
  18. </html>  

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

简单的一个@media就实现了响应式页面,是不是非常easy,

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

css3 media 响应式布局的简单实例

这是450px以下的页面效果

css3 media 响应式布局的简单实例

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

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

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

以上这篇css3 media 响应式布局的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
html5启动原生APP总结
Jul 03 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 HTML / CSS
css3的过滤效果简单实例
Aug 03 #HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 #HTML / CSS
关于box-sizing的全面理解
Jul 28 #HTML / CSS
css3动画效果小结(推荐)
Jul 25 #HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 #HTML / CSS
浅谈css3中的前缀
Jul 20 #HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 #HTML / CSS
You might like
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
Python的多态性实例分析
2015/07/07 Python
Python实现文件按照日期命名的方法
2015/07/09 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
Python 对象中的数据类型
2017/05/13 Python
python操作列表的函数使用代码详解
2017/12/28 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
Python实现打印实心和空心菱形
2019/11/23 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
护理专业应届毕业生推荐信
2013/11/15 职场文书
财务会计专业求职信范文
2013/12/31 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
烹饪自我鉴定
2014/03/01 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
Python实现简繁体转换
2021/06/07 Python
React 高阶组件HOC用法归纳
2021/06/13 Javascript