css3media响应式布局实例


Posted in HTML / CSS onJuly 08, 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>  

这段代码的效果css3media响应式布局实例css3media响应式布局实例

@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以上的页面效果css3media响应式布局实例

这是450px以下的页面效果css3media响应式布局实例总体做法就是将每一块div响应式缩到450px以下的时候每个div的宽度为100%

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

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

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

原文地址:http://www.cnblogs.com/ayu999/archive/2016/07/07/5649910.html

HTML / CSS 相关文章推荐
利用CSS3的transform做的动态时钟效果
Sep 21 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
Html5 滚动穿透的方法
May 13 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 #HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 #HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 #HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 #HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 #HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 #HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 #HTML / CSS
You might like
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
php 类自动载入的方法
2015/06/03 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
python学习笔记:字典的使用示例详解
2014/06/13 Python
Python中super的用法实例
2015/05/28 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
python读写文件write和flush的实现方式
2020/02/21 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
安全员岗位职责
2015/02/10 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
欠款起诉书范文
2015/05/19 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP
python获取带有返回值的多线程
2022/05/02 Python