1000字范文 > 【前端之路】通过css让移动端与pc端自适应

【前端之路】通过css让移动端与pc端自适应

时间：2024-05-07 23:55:16

跨平台移动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所示。