html小项目,初探响应式布局 - 以小项目为例

一 响应式布局

最近在项目开发的时候，发现了自己对css布局方面的一些不足之处，特别是适配不同分辨率方面，几乎是没有经验的。在查阅了相关资料之后发现，响应式布局是目前解决不同分辨率显示问题的最好解决方案。达到一次设计，普遍使用的功能。本文主要以一个小项目为例，来说明这个概念。响应式Web设计

二 media查询

media查询是响应式布局的核心所在，根据不同的条件来显示不同的css样式。达到不同分辨率的屏幕上显示不同的样式效果的目的。

@media(min-width:1200px)

{

.container{

width:1170px;

}

}

上例就是媒体查询一个最简单的示例。当输出设备的宽度大于1200px的时候，容器的宽度等于1170px。想了解更多media query可以点击这里

三 响应式项目

作为前端开发的同学们一定都上过BootStrap的官网。我们来看看官网的导航部分，当屏幕宽度不同的时候，其导航条的样式也是不一样的。

(1)当屏幕宽度大于768px时显示的样式

(2)当屏幕宽度小于768px时显示的样式

下面我们就来实现一下这个小功能。

3.1 html核心代码

Bootstrap

• 起步
• 全局CSS样式
• 组件
• javaScript插件
• 定制
• 网站实例

• BootStrap中文网

B

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

下载Bootstrap

当前版本： v3.3.7 | 文档更新于：2017-05-22

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的知识点击这里

四 总结

通过以上的小案例，我们可以大致了解一个响应式布局是一个什么样的概念。在日常开发中，响应式布局是一个比较有用的布局方法，主要几点就是媒体查询的使用。(另外还有不设置绝对宽度，流体布局的使用等等)。以后自己在开发页面的时候，一定要考虑好在不同分辨率输出设备上的兼容显示问题。这点非常重要。