移动端按比例缩放与导航栏
1. 首先在 head 中添加声明
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
viewport标记,用于指定用户是否可以缩放Web页面,并对相关的选项进行设定。
width 和height指令分别指定视区的逻辑宽度和高度。它们的值可以是以像素为单位的数字,也可以是一个特殊的标记符号。如上文代码中device-width即表示,视区宽度应为设备的屏幕宽度。类似的,device-height即表示设备的屏幕高度。
initial-scale用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异,通常情况下,设备会在浏览器中呈现出整个Web页面。设为1.0则显示未经缩放的Web页面。
maximum-scale和minimum-scale用于设置用户对于Web页面缩放比例的限制。值的范围为0.25~10.0之间
user-scalable指定用户是否可以缩放视区,即缩放Web页面的视图。值为yes时允许用户进行缩放,值为no时不允许缩放。
参考链接:https://blog.csdn.net/yiyueqinghui/article/details/86606929
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
目的是提高代码的兼容性,在不同浏览器中能够使用。在实践过程中尚未出现应为此代码而导致的兼容性问题(可能因为自己的浏览器版本比较新)。
2.link bootstrap
<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
链接上bootstrap,可以调用bootstrap库中的样式,较为方便。也是此次导航栏解决的关键。同样添加在 head 中。
3. 填写导航栏代码
<!-- 页面小屏的时候(默认设置min-width: 768px)出现的汉堡按钮 -->
<nav class="navbar " role="navigation" >
<!-- 这里是汉堡式菜单显示隐藏的折叠开关 -->
<!-- data-toggle用于告诉 JavaScript 需要对按钮做什么, data-target指示要切换到哪一个元素。 <span> 的样式表示引用bootstrap例的样式 (汉堡按钮的样式)。 -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
</div>
<!-- 页面大屏的时候出现导航栏coolapse用于折叠或展开内容块 -->
<div class="collapse navbar-collapse">
<!--clearfix 清除浮动 -->
<ul id="nav" class="nav clearfix navbar-nav">
<!-- 可以给这个li去class方便修改-->
<li class="#"><a href="#p">首页</a></li>
<!--有下拉菜单时需要给li写dropdown;a中的class与data-toggle与上方作用一致-->
<li class="dropdown #"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
介绍
<b class="caret"></b>
</a>
<!--告诉ul展开下拉菜单-->
<ul class="dropdown-menu">
<li><a href="#">概况</a></li>
<!--下拉菜单中的分隔线,可加可不加-->
<li role="separator" class="divider"></li>
<li><a href="#">致辞</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">团队</a></li>
</ul>
</li>
</ul>
</div>
</nav>
注意事项:
- 此依赖JavaScript,且当viewport较小时,导航栏不可打开。
- 一般会在nav外部加一个div class=“head”的盒子,方便修改(当然,也可以加很多个盒子)。
- 可以添加navbar-default 或其他来改变导航栏颜色。
- 用css可以很方便的修改导航栏的样式。
- 亲测可用
参考链接:https://www.cnblogs.com/hnnydxgjj/p/5874153.html
- 注:需要注意调整link CSS与link bootstrap 的顺序以免导致bootstrap里的默认格式覆盖掉自己写的CSS格式。
文章是自己用于记录自己学习以来的问题和过程。如果有帮到大家,非常荣幸。不求打赏,点赞,只求在大佬们发现问题的时候,能够和我说一声,让我能有长足的进步。万分感谢!万分感谢!