响应式页面
根据用户行为以及使用的设备环境页面自动地进行相对应的布局
淘宝和京东的方案：当检测到用户使用手机浏览页面时，自动跳转到手机端的url（m.taobao.com/m.jd.com）
知乎的方案：PC端和手机端执行不同的页面文件，不会让PC端和手机端页面共存
1. Media queries （媒体查询）
当满足某个条件时，CSS 生效，不满足时，CSS 不生效
<!doctype html>
<html lang=zh-Hans>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
@media (max-width: 320px) { /* 0~320 */
body{
background: red;
}
}
@media (min-width: 321px) and (max-width:375px) {/* 321~375 */
body{
background: orange;
}
}
@media (min-width: 376px) and (max-width: 425px) { /* 376~425 */
body{
background: yellow ;
}
}
@media (min-width: 426px) and (max-width: 768px) { /* 426~768 */
body{
background: green ;
}
}
@media (min-width: 769px) { /* 769~max */
body{
background: blue ;
}
}
</style>
<title>移动端页面</title>
</head>
<body>
</body>
</html>
不同平台的响应式页面必须要有设计图稿才能做！不然会非常丑！！！
Mobile First
随着智能手机的普及，大多数用户使用手机看页面，开发时优先做移动端页面的方案就是 Mobile First
手机端要加一个 meta
移动端要加一个
meta，把视窗宽度设置为设备宽度；不加的话，自动模拟屏幕宽度为 980px 去缩放
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!doctype html>
<html lang=zh-Hans>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
* {
margin: 0;
padding: 0;
}
a {
color: inherit;
text-decoration: none
}
ul, li {
list-style: none;
}
header {
padding: 10px;
position: relative;
}
.logo {
width: 60px;
height: 60px;
background: lightcoral;
border-radius: 50%;
}
.nav > li {
float: left;
}
.nav {
display: none;
margin-top: 10px;
background: cornflowerblue;
}
.nav.active {
display: flex;
justify-content: space-between;
}
.nav2 {
display: none;
}
header > button {
position: absolute;
right: 20px;
top: 25px;
}
@media (min-width: 451px) {
header > button {
display: none;
}
.nav,.nav.active {
display: none;
}
.nav2 {
display: block;
}
header {
display: flex;
align-items: center;
}
header .nav2 {
display: flex;
margin: 20px;
}
header .nav2 > li {
margin: 0 10px;
}
}
</style>
<title>移动端页面</title>
</head>
<body>
<header>
<div class="logo"></div>
<button id="xxx">菜单</button>
<ul id="yyy" class="nav clearfix">
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
</ul>
<ul class="nav2">
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
</ul>
</header>
<script>
xxx.onclick = function () {
yyy.classList.toggle('active')
}
</script>
</body>
</html>
子元素浮动，父元素必须清除浮动；但是当父元素使用
flex会自动清除浮动
隐藏元素
如果一个元素在同一屏幕有不同状态，用 JS 切换
如果一个元素在不同屏幕上有不同的状态，用 CSS 媒体查询切换；样式被覆盖可能是选择器优先级问题
display:none隐藏元素，在特定的条件下展示
不要用 JS 直接改变样式，CSS 改变样式，JS 只改变状态 ！！！
<!--这是一个用 JS 改变样式例子 不推荐这样使用-->
<!doctype html>
<html lang=zh-Hans>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
* {
margin: 0;
padding: 0;
}
a {
color: inherit;
text-decoration: none
}
ul,li{
list-style: none;
}
.logo{
width: 60px;
height: 60px;
background: lightcoral;
border-radius: 50%;
}
.clearfix::after{
content:"";
display: block;
clear: both;
}
.nav > li {
float: left;
}
.nav{
display: none;
}
.nav.active{
display: block;
}
</style>
<title>移动端页面</title>
</head>
<body>
<header>
<div class="logo"></div>
<button id="xxx">菜单</button>
<ul id="yyy" class="nav clearfix">
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
</ul>
</header>
<script>
xxx.onclick=function (){
if (yyy.style.display === 'block'){
yyy.style.display = 'none'
}else{
yyy.style.display = 'block'
}
}
</script>
</body>
</html>
<!doctype html>
<html lang=zh-Hans>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
* {
margin: 0;
padding: 0;
}
a {
color: inherit;
text-decoration: none
}
ul,li{
list-style: none;
}
.logo{
width: 60px;
height: 60px;
background: lightcoral;
border-radius: 50%;
}
.clearfix::after{
content:"";
display: block;
clear: both;
}
.nav > li {
float: left;
}
.nav{
display: none;
}
.nav.active{
display: block;
}
</style>
<title>移动端页面</title>
</head>
<body>
<header>
<div class="logo"></div>
<button id="xxx">菜单</button>
<ul id="yyy" class="nav clearfix">
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
</ul>
</header>
<script>
xxx.onclick=function (){
yyy.classList.toggle('active')
}
</script>
</body>
</html>
移动端交互注意事项
- 没有
hover - 有
touch事件
用
touch事件模拟滑动，可以用第三方插件支持，比如TouchSwipe-Jquery-Plugin
- 没有
resize - 没有滚动条
网友评论