CSS3之响应式布局及其应用
使用 Media 属性前需添加兼容移动设备优先代码
<meta name=”viewport”content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=”no”> /*参数说明：
- width=device-width：宽度等于当前设备宽度
- Initial-scale：初始缩放比列（默认 1.0）
- maximum-scale：允许用户缩放最大比列（默认 1.0）
- user-scalable：是否允许手动缩放（默认为 no）
*/
使用 Media 属性：<style>里执行媒体查询
@media mediatype and ( media feature ){
CSS-Code;
}
参数说明：
mediatype 在w3c标准中，只有all、print、screen、speech（应用于屏幕阅读器等发声设备）这四个媒体类型仍能>使用
aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率
color 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于 0
color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于 0
device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。
device-height 定义输出设备的屏幕可见高度。
device-width 定义输出设备的屏幕可见宽度。
grid 用来查询输出设备是否使用栅格或点阵。
height 定义输出设备中的页面可见区域高度。
max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
max-color 定义输出设备每一组彩色原件的最大个数。
max-color-index 定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height 定义输出设备的屏幕可见的最大高度。
max-device-width 定义输出设备的屏幕最大可见宽度。
max-height 定义输出设备中的页面最大可见区域高度。
max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution 定义设备的最大分辨率。
max-width 定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color 定义输出设备每一组彩色原件的最小个数。
min-color-index 定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width 定义输出设备的屏幕最小可见宽度。
min-device-height 定义输出设备的屏幕的最小可见高度。
min-height 定义输出设备中的页面最小可见区域高度。
min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution 定义设备的最小分辨率。
min-width 定义输出设备中的页面最小可见区域宽度。
monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于 0
orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan 定义电视类设备的扫描工序。
width 定义输出设备中的页面可见区域宽度。
注意：如果想在一个语句中定义多个条件时，可以使用and连接，and后面有个空格别忘了
示例：@media screen and (min-width: 960px,max-width: 1200px){}
响应式布局实际应用
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>响应式布局实际应用</title>
<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
<meta name="format-detection" content="telephone=no,email=no"/>
<link rel="stylesheet" type="text/css" href="css/mo2.css"/>
</head>
<body>
<div>
<header id="head">
<ul>
<li>header1</li>
<li>header2</li>
<li>header2</li>
<li>header2</li>
<li>header2</li>
</ul>
<div>icon</div>
</header>
<section id="main">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</section>
<footer id="foot">
footer
</footer>
</div>
</body>
</html>
CSS代码：
*{
margin: 0px;
padding: 0px;
font-family: "微软雅黑";
}
#head,
#foot,
#main
{
height: 100px;
width: 1200px;
/*width: 85%;*/
background-color: #3d4043;
text-align: center;
font-size: 48px;
line-height: 100px;
margin: 0 auto;
color: #fff;
}
#head div{
display: none;
font-size: 20px;
height: 30px;
width: 100px;
background-color: #5dcff4;
float: right;
line-height: 30px;
margin-top: 35px;
}
#head ul{
width: 80%;
margin-left: 10%;
}
#head ul li{
width: 20%;
float: left;
text-align: center;
list-style: none;font-size: 20px;
}
#main{
height: auto;
margin: 10px auto;
overflow: hidden;
}
.left,
.center,
.right{
height: 600px;
line-height: 600px;
float: left;
width: 20%;
background-color: #954ea6;
}
.center{
width: 60%;
border-left: 10px solid #FFF;
border-right: 10px solid #FFF;
box-sizing: border-box;
}
@media only screen and (max-width: 1200px) {
#head,
#foot,
#main{
width: 100%;
}
}
@media only screen and (max-width: 980px) {
.right{
display: none;
}
.left{
width: 30%;
}
.center{
width: 70%;
border-right: hidden;
}
}
@media only screen and (max-width: 640px) {
.left,
.center,
.right{
width: 100%;
display: block;
height: 200px;
line-height: 200px;
}
.center{
border: hidden;
border-top: 10px solid #FFFFFF;
border-bottom: 10px solid #FFFFFF;
height: 600px;
line-height: 600px;
}
#head ul{
display: none;
}
#head div{
display: block;
}
}
CSS3之响应式布局及其应用的更多相关文章
- CSS3之响应式布局
在没有C3的时候,响应式布局是通过js来实现的. 开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以 ...
- html5 + css3 + jQuery + 响应式布局设计
1. [代码][HTML]代码 <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...
- 【CSS3】响应式布局
准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 1 <meta name="viewport" content ...
- css3图片响应式布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 原生css3作响应式布局
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- css3media响应式布局
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的 普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很 ...
- html5+css3+jquery完成响应式布局
响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们 ...
- css3媒体查询实现网站响应式布局
最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
随机推荐
- VC除零异常（错误）捕获
// testFinally.cpp : Defines the entry point for the console application. // #include "stdafx.h ...
- Qt Installer Framework 3.0.1 Released（功能比较强）
We are happy to announce the release of Qt IFW 3.0.1. 3.0.1 is fully compatible with 2.0.5, which me ...
- 避免让WPF资源字典变得杂乱臃肿
原文:避免让WPF资源字典变得杂乱臃肿 避免让WPF资源字典变得杂乱臃肿 周银辉 今天看到项目种的一个XXXResource.xaml文件代码 ...
- 实现js呼叫流行
<span style="font-size:14px;">//Html代码:单击控制实现通话"收件人流行" <!DOCTYPE html&g ...
- WPF 设置类库项目为启动项，设置窗体跟随。
原文:WPF 设置类库项目为启动项,设置窗体跟随. 1.添加用于启动的类Program.cs,需要一个静态的Main函数入口. using System; using System.Windows; ...
- WPF MvvmLight简单实例(1) 页面导航
原文:WPF MvvmLight简单实例(1) 页面导航 实现了那些功能,先看看截图: 操作描述: 在程序运行后,点击“Load”按钮,页面会加载PageOne,点击PageOne页面中的“Next” ...
- 关于Tiff图片的编解码
TiffBitmapEncoder 类 (System.Windows.Media.Imaging)https://msdn.microsoft.com/zh-cn/library/ms635161( ...
- Windows10 使用Virtual Box一启动虚拟机就蓝屏（错误代码SYSTEM_SERVICE_EXCEPTION）解决方案
原文:Windows10 使用Virtual Box一启动虚拟机就蓝屏(错误代码SYSTEM_SERVICE_EXCEPTION)解决方案 一打开虚拟机电脑就立马蓝屏重启,新建虚拟机也没用,然后就开始 ...
- JS 浮点加减乘除运算
//浮点数加法运算 function FloatAdd(arg1,arg2){ var r1,r2,m; try{r1=arg1.toString().split(".")[1]. ...
- Hadoop分布式文件系统
在一个经典的数据架构中,Hadoop是处理复杂数据流的核心.数据从各种系统中收集而来,并汇总导入到Hadoop分布式文件系统HDFS中,然后通过MapReduce或者其它基于MapReduce封装的语 ...