CSS5：移动端页⾯（响应式）
CSS5：移动端页⾯(响应式)
如果⼿机端和PC端页⾯差别很⼤，就不要写响应式，不要写@media 就直接将两个页⾯拆开成两个⽂件就可以了.关于判断是⼿机端你还是PC端，就交给后端来做
只有⼀些新闻站点和博客站点⽤响应式，因为布局简单，响应式⾜够
1.媒体查询 media query
媒体：电脑，纸张，都是媒体
含义：如果媒体满⾜0到800 之间，那么会应⽤这⾥⾯的样式
<style>
@media (max-width: 800px){/*如果媒体满⾜0到800 之间，那么会应⽤这⾥⾯的样式*/
body{
background-color: red;
}
}
</style>
注意:
<style>
@media (max-width: 800px){/*如果媒体满⾜0-800 之间，那么会应⽤这⾥⾯的样式*/
body{
background-color: red;
}
}
@media (max-width: 900px){/*如果媒体满⾜0-900 之间，那么会应⽤这⾥⾯的样式*/
body{/*这段媒体查询⽐上⾯优先级⾼，会将上⾯的覆盖，如果低于800了，会变成蓝⾊*/
background-color: blue;
}
}
</style>
所以要倒过来写，先写⼤范围
<style>
@media (max-width: 768px){/*0-768*/
body{
background-color: blue;
}
}
@media (max-width: 425px){/*0-425*/
body{
background-color: red;
}
}
@media (max-width: 375px){/*0-375*/
body{
background-color: orange;
}
}
@media (max-width: 320px){/*0-320*/
body{
background-color: black;
}
}@media (min-width: 769px){/*769~+++*/
/*超过769的*/
body{
background-color: green;
}
}
</style>
也可以规定详细范围:
1.1引⽤⽅法
也可以使⽤CSS⽂件的⽅法引⽤
1.2 要向设计师要⽹页设计图
1.3 隐藏菜单响应式
1.3.1先做⼿机还是先做PC
Mobile first 先做⼿机
desktop first 先做PC
推荐Mobile first，因为现在⼤部分都是⼿机看⽹页
1.3.2CSS优先级问题解决⽅法
1. ⽤⾕歌开发者⼯具查看CSS优先级，然后调整
2. 如果style内嵌在html⾥,⽐如jquery的toggle，那么直接使⽤display: none !important;
1.3.3flex布局的⼀些⽤法
header{
display: flex;
/*⾥⾯的垂直居中*/
align-items: center;
}
header .mobilMenu {
display: flex;
justify-content: space-around;
/*flex布局display: flex；这个容器使⽤flex布局
justify-content属性定义了项⽬在主轴上的对齐⽅式。
justify-content: space-around；每个容器⾥⾯的项⽬两侧的间隔相等。*/
background-color: #ccc;
}
代码
预览
<!doctype html>
<html lang="en">
<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">
<title>响应式页⾯</title>
<script src="ajax.aspnetcdn/ajax/jQuery/jquery-1.8.0.js">
</script>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}
ul, ol {
list-style: none;
}
.logo {
width: 60px;
height: 60px;
background: #000;
border-radius: 50%;
}
header {
position: relative;
}
header > button {
position: absolute;
right: 0;
top: 26px;
}
header .mobilMenu {
display: flex;
justify-content: space-around;
/
*flex布局display: flex；这个容器使⽤flex布局
justify-content属性定义了项⽬在主轴上的对齐⽅式。
justify-content: space-around；每个容器⾥⾯的项⽬两侧的间隔相等。*/
background-color: #ccc;
}
header .pcMenu{
display: none;
}
/*接下来做pc端*/
@media (min-width: 451px) {
/*⼀般都写 451,⼿机最⼤也就450px*/
/
*先隐藏⼿机菜单和按钮*/
header .mobilMenu{
display: none !important;
/**CSS优先级问题解决⽅法:
1.直接使⽤display: none !important;
2.⽤⾕歌开发者⼯具查看CSS优先级
*/
}
header > button  {
display: none;
}
header{
display: flex;
/*⾥⾯的垂直居中*/
align-items: center;
}
/*再把pcMenu写成flex布局*/
header .pcMenu{
display: flex;/*只要改成flex ⾥⾯的⼦项⽬就变成⼀⾏了*/
margin-left: 20px;
background: red;
}
header .pcMenu>li{
margin-left: 20px ;
}
}
</style>
</head>
<body>
<header>
<div class="logo"></div>
<button id="menu">菜单</button>
<ul class="mobilMenu">
<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="pcMenu">
<li><a href="#">pc到航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>
</body>
cssclass属性
<script>
$('#menu').on('click', function () {
$('.mobilMenu').toggle();//toggle() ⽅法切换元素的可见状态。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显⽰这些元素。
//缺点：如果使⽤toggle()，他会把display这个style的属性内嵌到放在html⾥.
})
</script>
</html>
⼿机端要加⼀个meta viewport
历史原因：最开始⼿机浏览器(苹果三)会在⾃⼰的三四百像素的⼿机上模拟980像素的显⽰效果，然后让⽤户⾃⼰去缩放，查看⽹页.那么就告诉浏览器不要缩放我的⽹页,⼿机屏幕是多少像素，就显⽰多少像素的⽹页.使⽤下⾯的代码
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
name="viewport" ：视⼝
content="width=device-width，宽度等于设备宽度，意思就是不要变成980,⽤设备宽度.
user-scalable=no, ⽤户是否可以缩放：不许缩放，因为我在代码⾥已经给⽤户适配好了
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
初始缩放倍数，最⼤缩放倍数，最⼩缩放倍数，都是1.0，即使不能缩放
这句话缩写语法:
mate:vp
总结这个meta作⽤:
防⽌⼿机页⾯模拟 980 像素宽度
防⽌页⾯在⽤户双击的时候放⼤
防⽌⽤户两指缩放页⾯
3.移动端的特点
3.1flex布局是专门给⼿机定制的
只要学会flex布局,⼿机端布局基本OK⼿机端的交互⽅式不⼀样
3.2⼿机端的交互⽅式不⼀样
1. 没有 hover
2. 有 touch 事件
如何监听滑动事件?记录两次滑动时候的坐标，相减，就可以了.
有封装的库，例如jquery swipe, vue⾥的插件
3. 没有 resize
⼿机端的宽度永远跟设备宽度⼀样
4. 没有滚动条
滚动条会隐藏，会变成⼀个指⽰器，跟PC端不⼀样
5. 没有ie，意思就是什么CSS属性都可以⽤，不⽤考虑兼容的问题
4.CSS3的calc()使⽤
平时在制作页⾯的时候，总会碰到有的元素是100%的宽度。众所周知，如果元素宽度为100%时，其⾃⾝不带其他盒模型属性设置还好，要是有别的，那将导致盒⼦撑破。⽐如说，有⼀个边框，或者说有margin和padding，这些都会让你的盒⼦撑破。我们换句话来说，如果你的元素宽度是100%时，只要你在元素中添加了border,padding,margin任何⼀值，都将会把元素盒⼦撑破（标准模式下，除IE怪
异模式）。虽然前⾯介绍的CSS3属性中的box-sizing在⼀定程度上解决这样的问题，其实的calc()函数功能实现上⾯的效果来得更简单。
移动端页⾯布局常⽤哪些属性？
display: flex
width: calc(50% - 10px);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。