css3media响应式布局
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的 普及，用"大势所趋"来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。随着技术的发展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 id="p">200px以上并且500px以下背景变成红色</p>
</body>
</html>
这段代码小于200px或者大于500px不显示效果
简单的一个@media就实现了响应式页面,是不是非常easy，
自己随便做的一个页面这是在450px以上的页面效果
这是450px以下的页面效果
总体做法就是将每一块div响应式缩到450px以下的时候每个div的宽度为100%
高度为auto，我在写这个网页的时候遇到一个小小的问题,做到页面底部的时候底部导航飞了,它没有安安分分的落在底部而是在中间,我在这里分享一 下小小的知识点那就是我最后的解决方法,只需要给底部的div一个style样式 clear：both这样底部就会安安分分的固定到下面了,在media里还会有横屏和竖屏的响应式,竖屏为 @media（orientation:portrait）
竖屏为@media(orientation:landscape)这样就可以适配横屏和竖屏了，media的优势非常多例如我们在创建自己的简历 的时候可以利用响应式布局这样我们的机会岂不是大了很多,HR也有可能会在手机上看到你的简历这个时候机会可能就悄悄的来到你的身边呢
css3media响应式布局的更多相关文章
- CSS学习笔记——响应式布局
响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够 ...
- 一步步开发自己的博客 .NET版 剧终篇（6、响应式布局 和 自定义样式）
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
- web页面之响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
- 移动Web之响应式布局的探讨
响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...
- html5+css3+jquery完成响应式布局
响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们 ...
- css3媒体查询实现网站响应式布局
最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...
- 关于bootstrap和响应式布局
bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...
- 【Win10开发】响应式布局——AdaptiveTrigger
接触过Windows10的童鞋已经知道Universal app不仅可以运行在pc上,还可以运行在mobile或者其他平台上.那么这样势必会带来一个问题,如何针对不同屏幕来进行布局适配.所以微软提供了 ...
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
随机推荐
- C#一些知识点：委托和事件的区别
在C#中,委托和事件是比较容易混淆的两个知识点,本篇博客就记录一下委托和事件之间的区别. 定义上的区别 委托:委托实际上是一个类,用来表示一个函数,可以理解为C++中的函数指针. 事件:事件是一个修饰 ...
- cocos2d-x 纹理源码分析
转自:http://blog.csdn.net/honghaier/article/details/8068895 当一张图片被加载到内存后,它是以纹理的形式存在的.纹理是什么东西呢?纹理就是一块内存 ...
- python写的百度贴吧相册下载
突然想搞个这样的工具,写来写去都不知道在干嘛了,本来两个文件,现在整合在一起了. 乱得不行,懒得整理了,能用就行. 下载部分用了多线程,但是下载一个文件还是用的单线程,也就是没管http头的range ...
- openssl生成rsa公私钥
1.生成私钥pem, 执行命令openssl genrsa -out rsa_private_key.pem 1024 2.生成公钥,执行命令openssl rsa -in rsa_private_ ...
- CDOJ 483 Data Structure Problem DFS
Data Structure Problem Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/proble ...
- [AngularJS] ui-router: named views
The ui-router library for AngularJS provides the ability to name views within your application. This ...
- perl 变量详解
http://www.perlmonks.org/?node_id=933450 use strict; use Devel::Peek; my $a; Dump($a); $a=4; Dump($a ...
- [原创，分享]DbHelper 续
一直在想怎么样才能让dbHelper更简单,更灵活,更僵化.终于我发布了第一个开源版本的dbhelper.此helper将使用System.Data.DbHelper作为命名空间.采用内部驱动与内容S ...
- DataPackage-数据库、表的区域设置和系统不一致导致处理失败
问题描述: 最近学习Datapackage,创建完之后,部署处理但总是提示某某字段的区域设置和目标字段的区域设置不一致,具体如图: 测试发现其它的数据库表又没有这类 ...
- ASCII与UNICODE的区别
1.ASCII的特点 ASCII 是用来表示英文字符的一种编码规范.每个ASCII字符占用1 个字节,因此,ASCII 编码可以表示的最大字符数是255(00H—FFH).这对于英文而言,是没有问题的 ...