一、 什么是响应式设计
1、针对某些设备的某些特征可以由不同的样式,通过媒体查询对页面进行重构。响应式网站是一个设计理念,它是多项技术的综合体。
2、目的是一个网站能够兼容多个终端(电脑、手机、Pad等)设备,不需要为每个终端做不同的版本。采用响应式布局设计的网站能够根据显示屏幕的大小而变化,页面的排版布局可以自动进行调整,以适应不同尺寸的屏幕,从而为用户提供更方便的阅读和交互。响应式布局简单的说就是一套设计在pc端和移动端都可以使用,并都能给用户提供方便的服务。
二、几种响应式设计的方式
1、bootstrap框架的方式
2、尽量去使用百分比来进行样式宽度的控制,少用甚至不要去使用固定宽高。
3、使用css属性里面的媒体查询来进行元素的控制。
4、使用弹性盒子来进行开发,实现响应式开发。
练习:利用百分比进行响应式设计
缺点:内容不可变,小屏幕多内容,大屏幕少内容。
三、利用媒体查询
1、meta标签
<meta name ="viewport" content="width = device-width,initial-scale=1">
(1)viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。
(2)参数设置∶
width – viewport的宽度
height – viewport的高度
initial-scale – 初始的缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放
2、media query(媒介查询)
@media mediatype and|not|only (media feature) {CSS-Code;}
Mediatype:设备类型, all (所有设备)、screen(用于电脑屏幕,平板电脑,智能手机等。)、 speech(应用于屏幕阅读器等发声设备)、 print(用于打印机和打印预览)
media feature:媒体功能
<meta name=“viewport” content=“width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=“no” “>
<title>响应式< /title>
<style type=“text/css”>
Body{
background:#9F3;}
@media screen and (max-width:400px){
Body{
background:#306;}
}
</style>
</head>
<body>
</body>
练习:当页面宽度少于400px时,显示左图布局效果,当页面宽度大于600px时,显示右图布局效果。
源码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable="no" ">
<title>无标题文档</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body{
text-align:center;}
header,footer{
height:100px;
margin-top:5px;
}
header+article{
height:600px;
margin-top:5px;
}
header{
background:#F00;
}
footer{
background:#666;
margin-top:5px;
}
section,header+article>article,aside{
background:#FF0;
height:200px;
margin-bottom:5px;
}
@media screen and (max-width:400px){
div{
width:90%;
margin:auto;
}
}
@media screen and (min-width:600px){
div{
width:90%;
margin:auto;
}
section{
width:20%;
height:600px;
float:left;
}
header+article>article{
width:60%;
float:left;
margin-right:1%;
margin-left:1%;
height:600px;
}
aside{
width:18%;
float:left;
height:600px;
}
}
</style>
</head>
<body>
<div>
<header></header>
<article>
<section></section>
<article></article>
<aside></aside>
</article>
<footer></footer>
</div>
</body>
</html>
四、响应式断点
1、手机的屏幕比较小,宽度通常在600像素以下;PC
( personal computer,个人计算机)的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768)
2、响应式设计一般对600px下,1000px上针对各版本做@media细化。设置相应的min-width和max-width值。
3、主要断点有:
第一个断点群体就是针对于智能手机设置,他的宽度是小于480px(<480px)
第二个断点是高智能移动设备,比如说Ipads设备,他的宽度是小于768px(<768px)
第三个断点就是针对于大设备,比如说PC端,他的宽度是大于768px(>768px)
4、其它几种断点:
添加一个小于320px的断点,针对于小型的移动设备;
还可以添加适用于平板设备的断点,大于768px小于1024px(>768px 和
最后还可以为超宽的桌面设置一个断点,大于1024px
5、设置断点把握三个要点:
满足主要的断点;
有可能的话添加一些别的断点;
设置高于1024px的桌面断点
五、字体响应
1、CSS3 规范引入了一个新的单位叫 rem,和 em 类相似,但相对于 HTML 元素来说, rem 更易于使用。
2、rem 是相对于 HTML 元素的。
3、使用rem单位,就按以下三个步骤来计算:
确定基数:一般10px(自己记住就行,不用写进代码里)
html {font-size:百分数;} 百分数=基数/16
基数10 百分数62.5%
基数14 百分数87.5%
基数16 百分数100%
px换算rem 公式=想要的px值/基数
也就是说,当你设置 html {font-size:100%;},你想给容器里的文字设置字号14px,换算成rem就是0.875rem。
4、设置字体:
重置 HTML 的字体大小:
html{font-size:100%}
定义响应式的字体大小:
@media screen and (max-width: 600px){
body{
font-size:0.75rem;}
六、图片响应
1、使用width属性:如果 width 属性设置为 100%,图片会根据上下范围实现响应式功能。
缺点:图片会比它的原始图片大
2、使用 max-width 属性:如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小
3、背景图片:背景图片可以响应调整大小或缩放。
(1)如果 background-size 属性设置为 “contain”, 背景图片将按比例自适应内容区域。图片保持其比例不变。
(2)如果 background-size 属性设置为 “100% 100%” ,背景图片将延展覆盖整个区域.
(3)如果 background-size 属性设置为 “cover”,则会把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例,因此 背景图像的某些部分无法显示在背景定位区域中。
4、不同设备显示不同图片
大尺寸图片可以显示在大屏幕上,但在小屏幕上确不能很好显示。我们没有必要在小屏幕上去加载大图片,这样很影响加载速度。所以可以使用媒体查询,根据不同的设备显示不同的图片。
5、HTML5 <picture>
元素
<audio controls>
<source src="背景音乐.mp3" type="audio/mp3">
<source src="背景音乐.ogg" type="audio/ogg">
<source src="背景音乐.wav" type="audio/wav">
</audio>
<picture>
元素类似于 <video>
和 <audio>
元素。可以设置不同的资源,可以设置多张图片,第一个设置的资源为首选使用的:
自学:掌握以下代码的功能及倍图的概念
<img class="image" src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w" sizes="(max-width: 360px) 340px, 128px">
七、响应式导航实例
源码如下:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {margin: 0;}
ul.sidenav {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position:relative;
height: 100%;
overflow: auto;
}
ul.sidenav li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
ul.sidenav li a.active {
background-color: #4CAF50;
color: white;
}
ul.sidenav li a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 25%;
padding: 1px 16px;
height: 1000px;
}
@media screen and (max-width: 900px) {
ul.sidenav {
width: 100%;
height: auto;
position: relative;
}
ul.sidenav li a {
float: left;
padding: 15px;
}
div.content {margin-left: 0;}
}
@media screen and (max-width: 400px) {
ul.sidenav li a {
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<ul class="sidenav">
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
<div class="content">
<h2>响应式边栏导航实例</h2>
<p>该实例在屏幕宽度小于 900px 时导航栏为顶部水平导航栏,如果大于 900px 导航栏会在左边,且是固定的。</p>
<p>如果屏幕宽度小于 400px 会变为垂直导航栏。</p>
<h3>重置浏览器窗口大小,查看效果。</h3>
</div>
</body>
</html>
完成以下导航栏效果:
源码如下:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta charset="utf-8">
<title></title>
<style>
/* nav */
nav {
position: relative;
margin: 20px 0;
}
nav ul {
margin: 0;
padding: 0;
}
nav li {
margin: 0 5px 10px 0;
padding: 0;
list-style: none;
float:left;
}
nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
}
nav a:hover {
color: #000;
}
nav .current a {
background: #999;
color: #fff;
border-radius: 5px;
}
@media screen and (max-width: 600px) {
nav {
position: relative;
min-height: 40px;
}
nav ul {
width: 180px;
padding: 5px 0;
position: absolute;
top: 0;
left: 0;
border: solid 1px #aaa;
background: #fff;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
nav li {
display: none; /* hide all <li> items */
margin: 0;
}
nav .current {
display: block; /* show only current <li> item */
}
nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
}
nav .current a {
background: none;
color: #666;
}
/* on nav hover */
nav ul:hover {
background-image: none;
}
nav ul:hover li {
display: block;
margin: 0 0 5px;
}
.nav ul:hover .current {
background: url(images/icon-check.png) no-repeat 10px 7px;
}
/* right nav */
.nav.right ul {
left: auto;
right: 0;
}
/* center nav */
.nav.center ul {
left: 50%;
margin-left: -90px;
}
}
</style>
</head>
<body>
<nav>
<ul>
<li class="current"><a href="#">Portfolio</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Print Media</a></li>
<li><a href="#">Graphic Design</a></li>
</ul>
</nav>
</body>
</html>
响应式网页测试平台:
http://www.wswl.net/a/html/