资讯专栏INFORMATION COLUMN

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

caspar / 2390人阅读

摘要:一响应式布局最近在项目开发的时候,发现了自己对布局方面的一些不足之处,特别是适配不同分辨率方面,几乎是没有经验的。在查阅了相关资料之后发现,响应式布局是目前解决不同分辨率显示问题的最好解决方案。

一 响应式布局

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

二 media查询

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

@media(min-width:1200px)
{
  .container{
     width:1170px;
    }  
}

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

三 响应式项目

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

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

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

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

3.1 html核心代码
  
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的知识点击这里

四 总结

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112091.html

相关文章

  • 初探flex布局

    摘要:一布局概述布局是一种较新盒子模型,在布局模型中,弹性容器的子元素的排布可以比较灵活,可以根据容器的大小自动扩展或收缩其大小。下面我们来看用布局怎么解决这些问题。所以学会使用布局是非常有必要的。想详细了解布局请点击这里。 一 flex布局 1.1 flex概述 flex布局是一种较新CSS盒子模型,在flex布局模型中,弹性容器的子元素的排布可以比较灵活,可以根据容器的大小自动扩展或收缩...

    Jeffrrey 评论0 收藏0
  • 阿里云前端周刊 - 第 31 期

    摘要:发布按照官方发布计划,的发布意味着进入阶段,彻底退出舞台,的还有半年结束。为了应对这个挑战,美团点评境外度假前端研发团队自年月起启动了面向端用户的赫尔墨斯项目。前端技术越来越复杂,有不低的技术门槛。 推荐 1. 利用 Dawn 工程化工具实践 MobX 数据流管理方案 https://zhuanlan.zhihu.com/p/... 项目在最初应用 MobX 时,对较为复杂的多人协作项...

    madthumb 评论0 收藏0
  • css模块化思想初探

    摘要:希望能通过理解的模块化,窥探出模块化的意义与思想。本文仅解析模块化思想与技巧,构建工具与动态样式语言本身这两样是必不可少,篇幅有限就不展开讨论了。 前言 前端模块化是个非常大的话题了,我们可以简单的分为html模块化、javascript模块化、css模块化;那么我们先从css模块化开始,css模块化基础却必不可少。希望能通过理解css的模块化,窥探出模块化的意义与思想。 提纲 当项目...

    zorro 评论0 收藏0
  • 【前端早读会】每天记录前端学习的过程

    摘要:在这里使用学而思网校的录像设备,记录前端工程师每天学习的内容商城小程序分享人王聪视频插件开发分享人魏媛视频原理分享人李佳晓视频讲座优化实战分享人江芊视频文件操作分享人张凯视频一次性学会正则表达式分享人贺杰视频浅谈 在这里使用学而思网校的录像设备,记录前端工程师每天学习的内容: 2019-8-22 商城小程序codereview 分享人:王聪 视频:https://lecture.xue...

    tylin 评论0 收藏0
  • 移动前端 - 收藏集 - 掘金

    摘要:使用移动设备查看页面时会发现,在微信浏览器中有顶部导航栏有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。移动端实践前端掘金说起,相信大家并不陌生。 Sticky Footer,完美的绝对底部 - 前端 - 掘金写在前面 做过网页开发的同学想必都遇到过这样尴尬的排版问题:在主体内容不足够多或者未完全加载出来之前,就会导致出现(图一)的这种情况,原因是因为...

    Jochen 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<