css实现响应式布局

一.什么是响应式布局

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是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=视口高度的百分之一；

css实现响应式布局相关推荐

css响应式布局_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
window safari 怎么进入响应式_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
在html中写响应式布局的代码,CSS实现响应式布局的方法
用CSS实现响应式布局响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中 ...
html 响应式布局怎么实现,CSS实现响应式布局
用CSS实现响应式布局响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中 ...
html页面高度设为自动,html – CSS：响应式布局中的高度自动问题
没有固定的正确高度.如果我在css中设置固定高度,则在响应式布局中,图像将不会以正确的宽高比调整大小. 主要问题是css根据src-attribute设置的图像计算自动高度和宽高比,而不是width- ...
html+css实现响应式布局入门
什么是响应式布局响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而 ...
html手机电脑自动适应模块,CSS网页响应式布局实现自动适配Pc/Pad/Phone设备
前言现在的设备很多,有PC.iPad.手机.智能手表.智能电视.如果没有响应式布局,那么电脑网页在手机或者ipad上显示,是体验非常差,操作不方便,视觉疲劳的,所以我们开发网页要做好响应式布局. i ...
CSS实现响应式布局(自动拆分几列)
1.css代码 <style type="text/css">.container{margin-top: 10px;}.outerDiv{float:left;wid ...
css @media 响应式布局
2019独角兽企业重金招聘Python工程师标准>>> 1.在 html 标签中 <link rel="stylesheet" type="te ...