网页各种设备自适应
🍒本篇是一篇十分优秀的案例,走过路过是千万不能错过~
电脑全屏1920px
手机尺寸375×667
ipad 768×102尺寸 也能轻松应对
🍑🍑🍑 这简直太秀了叭 爱了爱了
代码分析:
第一部分:header部分
正常显示:
缩放后显示:
代码:
htnl部分
<header id="header">
<section class="menu">
menu
<ul>
<li><a href="#">文章</a></li>
<li><a href="#">素材</a></li>
<li><a href="#">活动</a></li>
<li><a href="#">素材</a></li>
<li><a href="#">活动</a></li>
<li><a href="#">更多</a></li>
</ul>
</section>
<section class="logo">
<h1><a href="#" title="觉唯设计">觉唯设计</a></h1>
</section>
<!-- 中间菜单选项 -->
<nav class="nav">
<a href="#">文章</a>
<a href="#">素材