css实现响应式布局
一.什么是响应式布局响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够了。响应式设计与自适应设计的区别:响应式开发一套界面,通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容;自适应需要开发多套界面,通过检测视口分辨率,来判断当前访问的设备是pc端、平板、手机,从而请求服务层,返回不同的
一.什么是响应式布局
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够了。响应式设计与自适应设计的区别:响应式开发一套界面,通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容;自适应需要开发多套界面,通过检测视口分辨率,来判断当前访问的设备是pc端、平板、手机,从而请求服务层,返回不同的页面。cSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式,当重置浏览器窗口大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
二.响应式实现方式
- 媒体查询(下面具体讲解)
- 流体布局(float)
- 弹性布局(flex)
- 通过 JavaScript、JQuery 进行判断来显示不同的布局页面
- Bootstrap 等第三方框架
2.1 媒体查询
- 媒体查询(Media Query)是CSS3新语法。
- 使用 @media 查询,可以针对不同的媒体类型定义不同的样式
- @media 可以针对不同的屏幕尺寸设置不同的样式
- 使用@media才能够实现页面响应式布局
语法:
@media[not|only] type [and][expr] (media feature){
rules
}
-
type媒体类型:all(所有设备)、screen(用于电脑屏幕,平板电脑,智能手机等。)
-
media feature
1)width(浏览器的窗口尺寸,可加min/max)
2)device-width(设备的参数尺寸,可加min/max) -
min-width:最小宽度,在媒体查询中,宽度大于或者等于最小宽度时,就触发其CSS样式
-
max-width:最大宽度,在媒体查询中,宽度小于或者等于最大宽度时,就触发其CSS样式
注:
1.一般都是先实现PC端页面,然后再去做其他设备的兼容(把媒体查询写在默认样式之后)
2.设置宽度时,最好不要写死(px),而是用%单位参照父元素的大小
2.2 使用媒体查询的方式
1.直接在 CSS 文件中使用
<style type="text/css">
// 没有经过媒体查询限制的 CSS
@media 类型 and (条件 1) and (条件 2){
// 媒体查询生效才会执行的 CSS
}
</style>
2.使用import导入
// 当所有设备的宽度小于 980px 时,才会使用 import 导入 CSS 文件
@import url("css/media.css") all and (max-width:980px);
3.使用 link 链接,media 作为属性用于设置查询方式
// 当所有设备的宽度小于 980px 时,才会使用 link 链接 CSS 文件
<link rel="stylesheet" href="css/media.css" media="all and (max-width:980px)" />
注:媒体查询的优先级与普通 CSS 完全相同,因此当使用媒体查询时,一定要将媒
体查询的样式放在默认样式之后,否则媒体查询会被默认样式覆盖,也就无法针对不同设备
进行变化
2.3案例
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background-color: rgb(242, 242, 242);
}
nav {
width: 100%;
height: 40px;
text-align: center;
padding-top: 10px;
}
nav p {
margin-top: 10px;
}
.content {
width: 100%;
margin-top: 40px;
}
.content>div {
width: 50%;
float: left;
}
.left img {
width: 90%;
height: 600px;
}
.right {
/* background-color: aqua; */
height: 850px;
margin-left: -40px;
}
table {
width: 100%;
/* width: 300px;
margin-bottom: 10px; */
}
table tr {
width: 100%;
/* margin-top: 20px;
*/
height: 30px;
}
table tr td {
font-size: 20px;
}
table tr td input:not([type=button]),
table tr td select {
width: 80%;
height: 40px;
}
table tr td textarea {
width: 80%;
}
table tr td input[type=button] {
width: 100px;
height: 40px;
background-color: green;
}
@media screen and (max-width:600px) {
.content>div {
float: none;
width: 100%;
text-align: center;
}
}
<nav>
<h1>联系我们</h1>
<p>请填写信息:</p>
</nav>
<div class="content">
<div class="left">
<img src="../image/map.png" alt="">
</div>
<div class="right">
<table>
<tr>
<td>联系人</td>
</tr>
<tr>
<td><input type="text" placeholder="请输入姓名.."></td>
</tr>
<tr>
<td>联系电话</td>
</tr>
<tr>
<td><input type="text" placeholder="请输入邮箱.."></td>
</tr>
<tr>
<td>测试</td>
</tr>
<tr>
<td><select name="city" id="city">
<option>北京</option>
<option selected="selected">上海</option>
<option>厦门</option>
</select></td>
</tr>
<tr>
<td>留言</td>
</tr>
<tr>
<td><textarea id="contents" cols="30" rows="10" placeholder="反馈信息"></textarea></td>
</tr>
<tr>
<td><input type="button" name="" id="" value="提交"></td>
</tr>
</table>
</div>
</div>
三.补充:单位
- px:像素(pixel)相对长度单位,,是相对于屏幕显示器分辨率而言的;
- em:如果自身有font-size,em相对于自己的font-size,如果自身没有font-size,em相对于父元素的font-size(任何浏览器默认字体大小都是16px,所有未经调整的浏览器都符合1em=16px)
- %:相对于父元素的宽度大小
- rem:相对于根元素(html)的字体大小
html {
font-size: 12px;
}
div {
font-size: 2rem; /* 24px */
width: 5rem; /* 60px */
background-color: skyblue;
}
- vw:视口的最大宽度,1vw=视口宽度的百分之一;
- vh:视口得最大高度,1vh=视口高度的百分之一;
更多推荐
所有评论(0)