响应式页面

最新推荐文章于 2024-06-07 19:37:27 发布

原创最新推荐文章于 2024-06-07 19:37:27 发布 · 392 阅读

1 ·

CC 4.0 BY-SA版权

CSS3 同时被 2 个专栏收录

6 篇文章

订阅专栏

HTML5

3 篇文章

订阅专栏

本文介绍了响应式布局的基本概念，详细解释了如何使用Media Queries来针对不同设备调整网页样式。通过具体的示例代码展示了如何根据不同屏幕尺寸应用不同的CSS样式，使网站能够适应多种设备。

响应式布局

Media

1.什么事响应式

http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html

Media Queries ：响应式

-->其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。

2.响应式格式：

@media 设备类型关系具体样式{}

常用设备类型：

1. all -->指所有类型

2. screen -->指显示器/笔记本/移动端设备

关系：

and（并且） 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)

示例：匹配：@media screen and（min-width:600px）

匹配：显示器并且最小宽度为600px

1.all: 所有设备

2.not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）、

3.only: 用来定某种特别的媒体类型

样式：

屏幕:

1.Min-width: 最小宽度

2.max-width: 最大宽度

3.min-height: 最小高度

4.max-height: 最大高度

设备输出宽高：

1.min-device-width: 最小输出宽度

2.ma-device-width: 最大输出宽度

3.min-device-height: 最小输出高度

4.max-device-height: 最大输出高度

根据不同浏览器的宽度引用不同样式

内容换行：实现换行只要

给父级元素添加：word-wrap:break-word

各浏览器的内核：

（-ms-：IE内核 / -webkit-:Safari 和 Chrome内核 / -moz- :Firefox 内核 / -o-: Opera 内核）

示例：

  <!DOCTYPE html>
<html>
<head>
	<title>响应式</title>
	<meta charset="UTF-8">
    <meta name="viewport"  content="width=device-width,initial-scale=1">
	<!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
	<style>
html,body{margin: 0;padding: 0;}
.heading,
.containg,
.footing{
	margin: 10px auto;
}
.heading{
  height: 100px;
  background: chocolate;
}
.left,
.right,
.main{
	background-color: cyan;
}
.footing{
	height: 100px;
	background-color: gray;
}
@media only screen and (min-width:960px){
   .heading,
   .containg,
   .footing{
   	width: 960px;
   }
   .left,
   .main,
   .right{
   	float: left;
   	height:500px;
   }
   .left,
   .right{
   	width: 200px;
   }
   .main{
   	width: 550px;
   	margin: 0px 5px;
   }
   .containg{
   	height: 500px;
   }
}
@media only screen and (min-width:600px) and (max-width: 960px){
   .heading,
   .containg,
   .footing{
   	width: 600px;
   }
   .left,
   .main{
   	float: left;
   	height: 400px;
   }
   .right{
   	display: none;
   }
   .left{
   	width: 160px;
   }
   .main{
   	width: 435px;
   	margin-left: 5px;
   }
   .containg{
   	height: 400px;
   }
}
@media only screen and (max-width: 600px){
   .heading,
   .containg,
   .footing{
   	width: 400px;
   }
   .left,
   .right{
   	width: 400px;
   	height: 100px;
   }
   .main{
   	margin-top: 10px;
   	width: 400px;
   	height:200px;
   }
   .right{
   	margin-top: 10px;
   }
   .containg{
   	height: 420px;
   }
}
	</style>
</head>
<body>
  <div class="heading"></div>
  <div class="containg">
  	<div class="left"></div>
  	<div class="main"></div>
  	<div class="right"></div>
  </div>
  <div class="footing"></div>
</body>
</html>

响应式 页面

响应式页面