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取负值时将拉近距离.常见的功能 ...
随机推荐
- Spring入门（3）-Spring命名空间与Bean作用域
Spring入门(3)-Spring命名空间与Bean作用域 这篇文章主要介绍Spring的命名空间和Bean作用域 0. 目录 Spring命名空间 Bean作用域 1. Spring命名空间 在前 ...
- Session.Abandon, Session.Clear和Session.Remove的区别
Session.Clear()就是把Session对象中的所有项目都删除了, Session对象里面啥都没有.但是Session对象还保留. Session.Abandon()就是把当前Session ...
- main函数是个什么东西
习惯的main函数有无参和两个参数的版本,那么main函数只能这么写吗? 好奇写了一个bug版本的main,结果是呵呵 #include <iostream> ...
- 令人惊奇的gdb和pstack
pstack竟然是一个shell脚本,核心是调用gdb的thread apply all bt查看进程的所有线程的堆栈,之后用sed正则展示线程堆栈信息. /proc/pid/exe是一个指向可执行文 ...
- Javascript 原型继承(续)—从函数到构造器的角色转换
对于每一个声明的函数,里边都会带有一个prototype成员,prototype会指向一个对象,现在我们来聚焦prototype指向的这个对象,首先我们会认为,这个对象是一个该函数对应的一个实例对象, ...
- MongoDB 快速入门--初级
数据库的操作一般来说都是CRUD,这其中最难的就是查询,所有所我们先来了解MongoDB中的 插入(insert) 说到插入,我们就必须得说说如何创建数据库,如何创建集合,然后才是如何创建文档. 在这 ...
- cocos2d-x CCScale9Sprite
转自:http://www.cocos2dev.com/?p=295 前段时间看CCEditBox的时候,发现里面有个利用9宫格图缩放图片的,也就是缩放带圆角的图片. 这个比较有用处,很多游戏中有很多 ...
- Centos上Apache重启，mysql重启, nginx 重启方法
1.重启 apache service httpd restrat /etc/init.d/httpd stop /etc/init.d/httpd start 2.重启 mysql service ...
- SAP BW顾问如何保持市场竞争力
跟大部分电工一样,SAP顾问也经常有迷茫的时候.因为,这个世界变化实在太快了.每一个电工,总是在担心自己会不会被飞速发展的技术所淘汰.那么,作为 一个BW顾问,应该如何保持市场竞争力呢?我觉得需要两个 ...
- codeforces Gym 100500H A. Potion of Immortality 简单DP
Problem H. ICPC QuestTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100500/a ...