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实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
用css3制作纸张效果(外翻卷角)
Feb 01 HTML / CSS
css3实现超炫风车特效
Nov 12 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
css背景和边框标签实例详解
May 21 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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
[对联广告] JS脚本类
2006/08/27 Javascript
javascript 文档的编码问题解决
2009/03/01 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
Python中的Descriptor描述符学习教程
2016/06/02 Python
python学习之matplotlib绘制散点图实例
2017/12/09 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
python中if嵌套命令实例讲解
2021/02/25 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
美国美妆网站:B-Glowing
2016/10/12 全球购物
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
播音主持女孩的自我评价分享
2013/11/20 职场文书
大一新生学期自我评价
2014/04/09 职场文书
工作所在部门证明
2014/09/21 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
2014年双拥工作总结
2014/11/21 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
深入理解Pytorch微调torchvision模型
2021/11/11 Python
Python中super().__init__()测试以及理解
2021/12/06 Python