内容简介：初探响应式布局 - 以小项目为例
一 响应式布局
最近在项目开发的时候，发现了自己对css布局方面的一些不足之处，特别是适配不同分辨率方面，几乎是没有经验的。在查阅了相关资料之后发现，响应式布局是目前解决不同分辨率显示问题的最好解决方案。达到一次设计，普遍使用的功能。本文主要以一个小项目为例，来说明这个概念。 响应式Web设计
二 media查询
media查询是响应式布局的核心所在，根据不同的条件来显示不同的css样式。达到不同分辨率的屏幕上显示不同的样式效果的目的。
@media(min-width:1200px)
{
.container{
width:1170px;
}
}
上例就是媒体查询一个最简单的示例。当输出设备的宽度大于1200px的时候，容器的宽度等于1170px。想了解更多media query可以点击 这里
三 响应式项目
作为前端开发的同学们一定都上过 BootStrap 的官网。我们来看看官网的导航部分，当屏幕宽度不同的时候，其导航条的样式也是不一样的。
（1）当屏幕宽度大于768px时显示的样式
（2）当屏幕宽度小于768px时显示的样式
下面我们就来实现一下这个小功能。
3.1 html核心代码
<header>
<div class="container">
<div class="nav-logo">
<a href="">Bootstrap</a>
<button type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="nav-content">
<ul class="nav-item">
<li><a href="#">起步</a></li>
<li><a href="#">全局CSS样式</a></li>
<li><a href="#">组件</a></li>
<li><a href="#">javaScript插件</a></li>
<li><a href="#">定制</a></li>
<li><a href="#">网站实例</a></li>
</ul>
<ul class="nav-item nav-item-right">
<li><a href="#">BootStrap中文网</a></li>
</ul>
</nav>
</div>
</header>
<main class="bs-docs-masthead">
<div class="container">
<span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">B</span>
<p class="lead">Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
<p class="lead"><a href="#" class="btn btn-outline-inverse btn-lg">下载Bootstrap</a></p>
<p class="version">当前版本： v3.3.7 | 文档更新于：2017-05-22</p>
</div>
</main>
html部分主要是借鉴了bootstrap原站的写法，发现他们在写html部分的时候，用的标签语义化非常好也很规范，这点很值得我们学习。像页面的头部都是使用的是header标签，导航部分使用nav，正文部分使用main标签等等。这些标签的准确使用能很好的让我们看出页面的一个整体脉络。
3.2 css部分核心代码
body{
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
background-color:#fff;
font-size:14px;
line-height: 1.42857143;
color:#333;
}
div.container{
font-weight: 500;
color: #563d7c;
margin:0 auto;
overflow: hidden;
padding:0px 15px;
@media (min-width: 768px)
{
width:750px;
}
@media (min-width: 992px)
{
width:970px;
}
@media (min-width: 1200px)
{
width:1170px;
}
div.nav-logo{
font-size: 18px;
overflow: hidden;
@media (min-width: 768px)
{
float: left;
}
a{
display: block;
padding: 15px;
line-height: 20px;
@media (min-width: 768px)
{
margin-left:-15px;
}
@media (max-width: 768px)
{
float: left
}
}
button{
@media (min-width: 768px)
{
display: none;
}
float:right;
padding:9px 10px;
margin:8px auto;
background-color: #f9f9f9;
border-color:#f9f9f9;
border:1px solid transparent;
span.icon-bar{
width: 22px;
height: 2px;
display: block;
background-color: #563d7c;
&:nth-of-type(2n){
margin: 4px 0px;
}
}
}
}
nav.nav-content{
overflow: hidden;
@media (max-width: 768px)
{
clear: both;
height: 0px;
transition: height 200ms linear;
}
ul.nav-item{
@media (min-width: 768px)
{
float: left;
overflow: hidden;
}
li{
@media(min-width: 768px)
{
padding:15px;
line-height: 20px;
float:left;
}
a{
@media(max-width: 768px)
{
display: block;
padding:10px 15px;
line-height: 20px;
}
}
}
}
ul.nav-item-right{
@media(min-width: 768px)
{
float: right;
margin-right: -15px;
}
}
}
}
main.bs-docs-masthead{
padding:80px 0px;
div.container{
color:#fff;
span{
margin:0 auto 30px;
}
}
.lead{
@media (min-width: 768px)
{
width: 80%;
}
@media (max-width: 768px)
{
font-size: 20px;
}
font-size: 30px;
margin:0 auto 30px;
.btn{
padding: 15px 30px;
font-size: 20px;
width:auto;
}
}
}
.navbar-static-top {
z-index: 1000;
border-width: 0 0 1px;
}
css的核心部分就是使用了@media query查询，具体参加代码。主要是几个地方用了@media查询来控制不同的屏幕宽度显示不同的样式。
3.3 一些简单交互的实现
当屏幕小于768px时，页面会显示一个buttton按钮，当点击button时，菜单出现，再点击隐藏，bootstrap封装了一个collapse类来实现这一功能。因为自己对css动画用的不多，所以想自己写一个类似的简单功能，所以这里就没有使用collapse类，而是实现了一个类似的功能。
js部分
const navContent = document.getElementsByClassName('nav-content')[0]
const clickBtn = document.getElementsByTagName('button')[0]
const collapseHeight = document.getElementsByClassName('nav-item')[0]
clickBtn.addEventListener('click',function(e){
if(!parseInt(window.getComputedStyle(navContent,null).height)){
navContent.style.height = '304px'
}
else{
navContent.style.height = 0
}
})
以上代码基本能实现一个collapse部分，但是如果仅仅这样写还远远达不到预期的效果，这里就需要加上css3动画-transition。transition会捕获css的变化，并且应用动画的形式过渡变化，而不是硬生生的改变。这点是非常实用的功能。以下代码就是让高度在200ms，线性的改变高度。
transition: height 200ms linear;
更多关于transition的知识点击 这里
四 总结
通过以上的小案例，我们可以大致了解一个响应式布局是一个什么样的概念。在日常开发中，响应式布局是一个比较有用的布局方法，主要几点就是媒体查询的使用。（另外还有不设置绝对宽度，流体布局的使用等等）。以后自己在开发页面的时候，一定要考虑好在不同分辨率输出设备上的兼容显示问题。这点非常重要。
以上所述就是小编给大家介绍的《初探响应式布局 - 以小项目为例》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
