请选择 进入手机版 | 继续访问电脑版
热搜: 活动 交友 discuz

弹性盒子下的响应式网页布局

[复制链接]
549 0

引言

传统的网页布局技术,大多是针对PC端网页进行开发的,一般包括固定宽度布局或流式布局。固定宽度布局受限于不同浏览器的分辨率,在小屏幕大宽度中会在浏览器中出现横向滚动条,影响了用户的体验。而流式布局虽然采用了百分比单位,避免在页面中出现横向滚动条,但在不同分辨率下,布局结构不能灵活调整,也同样影响了用户在交互中的体验效果。当然要解决这个问题,开发人员也可以根据不同的设备开发出多个版本的网页,但这也会导致网站开发和维护工作量的成倍增长。正因为这种情况,EthanMarcotte在2010年提出了响应式布局的概念,简单来说,就是让设计的网页能够响应用户的行为,根据不同终端设备环境(系统平台、屏幕、屏幕手持方向等)自动调整尺寸,实现完美的布局显示效果。要实现响应式网页设计,媒体查询技术、布局技术和响应式图片是3个关键要素。接下来笔者将基于弹性盒子模型的布局技术来分析如何实现响应式网页布局。

1媒体查询

在CSS3规范中,媒体查询可以根据视口的宽度、设备方向等差异化,加载不同的CSS样式达到渲染不同页面显示风格的效果。网页设计师可以针对不同的终端设备屏幕分辨率来编写不同的CSS布局样式,然后用户浏览网页时,终端设备可以通过自身的屏幕分辨率选择一种适合的页面布局。这样就可以实现在PC、平板和手机等终端设备中调用不同的CSS样式,从而实现完美的响应式设计。媒体查询由媒体类型、媒体属性和语法关键字3个部分组成,其基本的语法结构如下:上述代码中,@mediascreen表示媒体的类型为screen,也就是计算机屏幕设备。在媒体查询中,人们常用的媒体类型主要为screen和all。min-width:1200px表示屏幕宽度大于或等于1200px时的应用样式。下面笔者利用媒体查询在不同终端设备中实现不同布局技术的效果,分别针对PC、平板和手机端进行样式布局效果。笔者将设定页面的内容分为3个模块,该页面的HTML结构部分代码如下:对于PC端来说,屏幕分辨率一般比较大,所以笔者设计为3列的排版布局结构,具体如图1所示。实现的关键代码如下:针对平板端来说,屏幕的分辨率一般没有PC端高,所以使用3列排版布局可能会显得比较紧凑,在这里调整为两列排版布局结构,具体如图2所示。实现的关键代码如下:在手机端中,屏幕分辨率一般不大,所以移动端页面的布局一般都是一列结构显示效果。

2弹性盒子模型的原理

使用流式布局进行响应式页面布局,存在适配工作量大、百分比单位使用不方便等问题,因此在CSS3中,W3C引入了新的布局机制——弹性布局。弹性布局可以轻松进行响应式布局,既不使用浮动,也不用再计算传统的盒子大小,是一种非常灵活的布局方式。弹性盒子的结构相当于在一个大盒子中放置几个小盒子,它们彼此互相独立,容易设置。整个弹性盒子由容器、子元素、主轴和交叉轴构成。通过给容器盒子设置display属性为flex或inline-flex,将其定义为弹性容器。在弹性容器中的子元素则为弹性子元素,在弹性布局中,子元素的排列方向由主轴的排列方向来决定。

3弹性盒子布局的实现

页面的HTML结构代码为:根据页面效果分析,可以知道页面头部和页脚信息部分不需要响应式设置,只需要简单设置CSS盒子属性即可,所以该部分的CSS代码为:接下来笔者通过设置弹性盒子对页面主要内容区域进行响应式布局,其中在PC端上主要内容区域的3个盒子是横向排列的方式,其中文章内容部分所占据宽度较大。而在移动端上,3个盒子呈现的是纵向排列方式,并且可以看到文章内容部分的排列顺序发生调整,变成在主轴的第一个元素。首先使用弹性盒子属性设置页面的PC端效果,其中给.content类所在的主要内容区域添加dispalay:flex属性设置,让其成为弹性容器,这样其子元素会按照弹性布局进行排列。然后分别给.main、.nav和.aside类的元素设置order属性和flex-grow属性,调整弹性子元素的宽度和排列顺序,达到页面效果的要求。主要代码如下:接着利用媒体查询设置移动端效果,通过调整.content类元素的flex-direction属性将弹性盒子的主轴设置为从上到下的纵向排列,然后调整.main和.nav元素的order属性,让文章内容盒子排在主轴的第一个元素。在这里可以看到使用弹性盒子属性可以非常容易地调整元素的大小和排列顺序,能让网页在不同的终端设备上都呈现出完美的布局,给用户带来较好的体验效果。

4结语

基于弹性盒子的响应式布局带给人们一种新的跨平台Web布局模式,可以较为轻松给人们带来不同终端设备上的页面布局方式。当然因为弹性盒子模型是在CSS3版本才提出来的一种布局方式,所以一些早期的浏览器是不支持弹性布局的,这点Web开发者要清楚了解。如果不考虑低版本浏览器的兼容问题,笔者相信弹性布局将会越来越流行。

END
中云创科网络科技有限公司从事软件设计,软件开发,软件测试于一体专业化软件定制开发公司!我公司长期致力于APP,微信小程序及公众号开发定制 ,逐渐形成一套完善的行业化且专业化网络营销解决方案!十年经验,值得信任!!
    (3)智能硬件开发,有过智慧城市,智慧农业的策划,部署和实施经验
    (4)网站建设:高端网站定制、营销型网站建设、模板建站、手机网站建设、微信微站建设、淘宝店装修、域名空间、响应式网站、电子商务网站、外贸网站、平台网站、企业网站
为什么选择我们?
公司出品:8年网站建设经验,专业策划师、设计师、程序技术团队,无论做何种网站,都为您策划推荐,做适合贵司的网站或系统!
策略营销:我们不单只是给您做合适的网站,更要把它变成为您赚钱的网站;还会推荐较适合您的营销推广策略,让您持续赚钱!
优质服务:耐心倾听客户需求,做出另您满意的网站之余、还会为您提供放心的售后服务,让您没有后顾之忧!
https://lai170.com
https://dazhuangkeji.cn
售后电话:4009030429







举报 使用道具

回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0

关注

0

粉丝

87

主题
精彩推荐
热门资讯
网友晒图
图文推荐
  • 联系我们
  • 邮箱:161412644#qq.com(请把#改成@)
  • 电话:15642930400
  • QQ客服 161412644
  • 工作时间:周一至周五(早上9点至下午5点)
  • 微信公众平台

  • 扫描访问手机版

QQ|Archiver|手机版|小黑屋|老超市社区 ( 辽ICP备16008076号-2 ) |辽公网安备21140202000057号

GMT+8, 2020-8-14 18:44 , Processed in 0.149627 second(s), 42 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

  • QQ: 161412644

    客服电话

    15642930400

    电子邮件

    161412644@qq.com

    在线时间:8:00-16:00