跨平台移动WEB技术
一、目的
1、了解什么是响应式WEB设计
2、掌握CSS3媒体查询的使用
3、熟悉什么是栅格系统
4、掌握弹性盒布局
5、掌握汉堡菜单的制作
二、制作一个页面:
1、PC端为国字型布局,移动端为上下布局
2、必须有导航(不少于4个),移动端将导航收起,变为汉堡菜单。
3、页面中的文字和图片能够自适应设备大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>弹性盒布局</title>
<style>
body {
font: 24px Helvetica;
background: #fff;
width: 100%;
height: 100%;
}
.main {
min-height: 500px;
margin: 0px;
padding: 0px;
display: flex;/*设置该div为一个弹性盒容器*/
flex-flow: row;/*子元素按横轴方向顺序排列*/
}
.main > .article {
margin: 4px;
padding: 5px;
border-radius: 7pt;/*pt也是文字大小的一种单位,1pt=px*3/4 */
background: #719DCA;
flex: 3 ;/*用数字也可以达到分配宽度的效果,将容器分为5份,占3份*/
order: 2;/*排序为第2个子元素*/
}
.main > nav {
margin: 4px;
padding: 5px;
border-radius: 7pt;
background: #7B68EE;
flex: 1 ;/*将容器分为5份,占1份*/
order: 1;/*排序为第1个子元素*/
}
.main > aside {
margin: 4px;
padding: 5px;
border-radius: 7pt;
background: #7B68EE;
flex: 1 ;/*将容器分为5份,占1份*/
order: 3;/*排序为第3个子元素*/
}
#head2,#head1, footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 50px;
border: 2px solid #7B68EE;
border-radius: 7pt;
background: #FFF;
}
@media all and (max-width: 640px) {/*当屏幕宽度小于640px时*/
.main {
flex-flow: column; /*弹性盒中的子元素按纵轴方向排列*/
}
.main > .article, .main > nav, .main > aside {
order: 0; /*将子元素都设置成同一个值,指按自然顺序排列*/
}
.main > nav, .main > aside,#head1,#head2, footer {
min-height: 50px;
max-height: 50px;
}
#head1{
display: none;
}
#head2{
/*display: block;*/
}
}
@media all and (min-width: 640px) {
#head2{
display: none;
}
#guide{
display: none;
}
.noneUl{
display: none;
}
}
button{
border: #ccc 1px solid;
border-radius: 10pt;
outline: none;
}
.blockUl{
width: 50%;
display: flex;
list-style: none;
font-family: PingFangSC-Medium,Microsoft YaHei;
color: #323232;
font-size: 16px;
padding: 0 10px;
justify-content: center;
align-items: center;
}
.noneUl{
list-style: none;
margin: 10px;
background-color: #FFE4E1;
list-style-image: url("zheng.png");
}
.blockUl li{
width: 20%;
}
#guide{
position: fixed;
line-height: 50px;
display: none;
border-radius: 20pt;
margin-top: 50px;
width: 120px;
height: 50%;
min-height: 250px;
}
.article img{
width: 98%;
}
</style>
</head>
<body>
<!-- 隐藏的侧栏 -->
<div id="guide" style="display: none;">
<ul class="noneUl">
<li>首页</li>
<li>详情</li>
<li>动态</li>
<li>关于</li>
</ul>
</div>
<div id="head1">
<ul class="blockUl">
<li>首页</li>
<li>详情</li>
<li>动态</li>
<li>关于</li>
</ul>
</div>
<div id="head2">
<button onclick="done()" id="guideButn"><img src="more.png" width="40px" height="40px"></button>
</div>
<div class="main">
<div class="article">
<img src="img3.jpg">
</div>
<nav>左侧</nav>
<aside>右侧</aside>
</div>
<footer>footer</footer>
</body>
<script type="text/javascript">
var guideButn = document.getElementById("guideButn");
var guide = document.getElementById("guide");
function done(){
if(guide.style.display == "none"){
guide.style.display = "block";
}else{
guide.style.display = "none"
}
}
</script>
</html>
PC端效果如图1所示。
移动端效果如图2所示。
简述什么是栅格系统?
栅格系统以规则的网络阵列来指导和规范网页中的版面布局以及信息分布。栅格系统有时候也称为网格系统。
简述什么是媒体查询及媒体查询在网页开发中的作用。
CSS3媒体查询,就是根据页面分辨率设置不同的css样式,达到自适应的目的
media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强,是CSS 3的重要内容之一。