当前位置: 首页 > 编程日记 > 正文

响应式网页的布局设计

值得收藏的14款响应式前端开发框架

作为今年大热的设计趋势,响应式已然是设计师的标配技能。今天阿里的同学从响应式设计的布局类型、布局实现两方面深入讲解,有哪些实现布局的方式,该采用何种方式,都有相当专业细致的解答,不多说,来收!

布局类型:

xys201503042

布局实现

采用何种方式实现布局设计,也有不同的方式,这里基于页面的实现单位而言,分为四种类型:固定布局、可切换的固定布局、弹性布局、混合布局。

固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸; 可切换的固定布局:同样以像素作为页面单位,参考主流设备尺寸,设计几套不同宽度的布局。通过设别的屏幕尺寸或浏览器宽度,选择最合适的那套宽度布局; 弹性布局:以百分比作为页面的基本单位,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果; 混合布局:同弹性布局类似,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;只是混合像素、和百分比两种单位作为页面单位。

xys201503043

可切换的固定布局、弹性布局、混合布局都是目前可被采用的响应式布局方式。

其中可切换的固定布局的实现成本最低,但拓展性比较差;而弹性布局与混合布局效果具响应性,都是比较理想的响应式布局实现方式。只是对于不同类型的页面排版布局实现响应式设计,需要采用不用的实现方式。通栏、等分结构的适合采用弹性布局方式、而对于非等分的多栏结构往往需要采用混合布局的实现方式。

xys201503044

布局响应 对页面进行响应式的设计实现,需要对相同内容进行不同宽度的布局设计,有两种方式:桌面优先(从桌面端开始向下设计);移动优先(从移动端向上设计); 无论基于那种模式的设计,要兼容所有设备,布局响应时不可避免地需要对模块布局做一些变化(发生布局改变的临界点称之为断点), 我们通过JS获取设备的屏幕宽度,来改变网页的布局,这一过程我们可以称之为布局响应屏幕。常见的主要有如下几种方式:

布局不变,即页面中整体模块布局不发生变化,主要有:

模块中内容:挤压-拉伸;

模块中内容:换行-平铺;

模块中内容:删减-增加;

xys201503045

xys201503046

xys201503047

布局改变,即页面中的整体模块布局发生变化,主要有:

模块位置变换;

模块展示方式改变:隐藏-展开;

模块数量改变:删减-增加;

xys201503048

xys201503049

xys2015030410

很多时候,单一方式的布局响应无法满足理想效果,需要结合多种组合方式,但原则上尽可能时保持简单轻巧,而且同一断点内(发生布局改变的临界点称之为

转载于:https://www.cnblogs.com/wanliyuan/p/4359006.html

相关文章:

halcon算子翻译——set_framegrabber_callback

名称 set_framegrabber_callback - 为图像采集设备注册一个回调函数。 用法 set_framegrabber_callback( : : AcqHandle, CallbackType, CallbackFunction, UserContext : ) 描述 算子set_framegrabber_callback为AcqHandle指定的图像采集设备注册一个回调函数。 参数CallbackF…

设置Sysctl.conf用以提高Linux的性能(最完整的sysctl.conf优化方案)

Sysctl是一个允许您改变正在运行中的Linux系统的接口。它包含一些 TCP/IP 堆栈和虚拟内存系统的高级选项, 这可以让有经验的管理员提高引人注目的系统性能。用sysctl可以读取设置超过五百个系统变量。基于这点,sysctl(8) 提供两个功能:读取和…

AI 天气预报准确度高于气象台,一张 GPU 1秒预测未来 90 分钟天气

编译 | 禾木木 出品 | AI科技大本营(ID:rgznai100) 此次 DeepMind 聚焦天气预报这一重大挑战,与英国气象局合作将 AI 应用于预测降雨。 在天气现象中,雨尤其重要,因为它会影响我们的日常决策。 我应该带伞吗&#xff1…

33.搜索插件——autocomplete

搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定,当文本框输入字符时,绑定后的插件将返回与字符相近的字符串提示选择,调用格式如下: $(textbox).autocomplete(urlData,[options]); 其中,textbox参数为文…

React Native开源项目如何运行(附一波开源项目)

学习任何技术,最快捷的方法就是学习完基础语法,然后模仿开源项目进行学习,React Native也不例外。React Native推出了1年多了, 开源项目太多了,我们以其中一个举例子.给大家演示下如何运行开源项目.(前提是你已经搭建好…

http header头设置反向代理不缓存

一:概念说明 Expries:网页的cache过期时间,到指定日期网页cache失效 Last-Modified:网页的最新更新时间 Cache-Control 缓存控制 no-cache:不缓存网页 no-store:不缓存网页,如果有则删除之 must-revalidate:使之前,服务器响应使用…

985大学的高材生只会写代码片段,丢人吗?

很多同学在学习编程的时候都会遇到各种各样的难题,比如:没有合适的资料、学习过于碎片化、资料的质量层次不齐、看了很多视频自己动手时却还是不会、接触不到完整项目、无法检测自己的编程水平是不是企业所认可的……最近,小郭和小解同学也遇…

xcode6 dyld_sim is not owned by root

如果运行复制过来的xcode可能会这个提示,xcode6 dyld_sim is not owned by root解决方法打开终端 输入sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer

C语言关闭日志文件时忘了将日志文件全局变量指针置为NULL

C语言写了一个write_log函数以写日志,写了一个close_log_file函数以关闭日志,声明了一个日志文件全局变量文件指针plogFile。 write_log中首先判断plogFile是否为NULL,如果不为NULL,则直接引用plogFile写日志信息; 如果…

DeepMind 的新强化学习系统是迈向通用 AI 的一步吗?

作者 | Ben Dickson来源 | 数据实战派这篇文章是我们对 AI 研究论文评论的一部分,这是一系列探索人工智能最新发现的文章。对于已经精通围棋、星际争霸 2 和其他游戏的深度强化学习模型来说,人工智能系统的主要挑战之一是它们无法将其能力泛化到训练领域…

linux中iptables入门教程--设置静态防火墙

1、iptables介绍iptables是复杂的,它集成到linux内核中。用户通过iptables,可以对进出你的计算机的数据包进行过滤。通过iptables命令设置你的规则,来把守你的计算机网络──哪些数据允许通过,哪些不能通过,哪些通过的…

{好文备份}SQL索引一步到位

SQL索引一步到位(此文章为“数据库性能优化二:数据库表优化”附属文章之一) SQL索引在数据库优化中占有一个非常大的比例, 一个好的索引的设计,可以让你的效率提高几十甚至几百倍,在这里将带你一步步揭开他…

浅谈SQL Server中统计对于查询的影响

简介SQL Server查询分析器是基于开销的。通常来讲,查询分析器会根据谓词来确定该如何选择高效的查询路线,比如该选择哪个索引。而每次查询分析器寻找路径时,并不会每一次都去统计索引中包含的行数,值的范围等,而是根据一定条件创建…

《Effective C#中文版:改善C#程序的50种方法》读书笔记

一、用属性代替可访问的字段 1、.NET数据绑定只支持数据绑定,使用属性可以获得数据绑定的好处; 2、在属性的get和set访问器重可使用lock添加多线程的支持。 二、readonly(运行时常量)和const(编译时常量) …

100行代码,使用 Pygame 制作一个贪吃蛇小游戏!

作者 | 周萝卜来源 | 萝卜大杂烩相信我们大家都玩过贪吃蛇游戏,今天我们就从头一起来写一个贪吃蛇小游戏,只需要100多行的代码就完成了。用到的 Pygame 函数 贪吃蛇小游戏用到的函数功能描述init()初始化 pygamedisplay.set_mode()以元组或列表为参数创建…

Ubuntu + VirtualBox + windows xp互相访问

2019独角兽企业重金招聘Python工程师标准>>> 1 在ubuntu中安装最新版virtualbox,并且同时安装增强插件 2 设置xp网络位桥接网络 3 启动虚拟机中xp系统 4 关闭虚拟机中xp防火墙 virtualbox原来如此的爽,太方便了 第二天到公司使用网络的时候,基…

cocoapods使用教程

#####一、什么是CocoaPods CocoaPods是一个用来帮助我们管理第三方依赖库的工具。 #####二、安装cocoaPods 1.移除现有Ruby默认源 $gem sources --remove https://rubygems.org/ 复制代码2.使用新的源 $gem sources -a https://ruby.taobao.org/ 复制代码3.验证新源是否替…

Memcached安装以及PHP的调用

一:安装libevent 由于memcached安装时,需要使用libevent类库,所以先安装libevent 1.下载 #wget http://www.monkey.org/~provos/libevent-2.0.12-stable.tar.gz 2.解压缩 #tar xzfv libevent-2.0.12-stable.tar.gz 3.进入目录 #cd l…

matplotlib 可视化必知必会富文本绘制方法

作者 | 费弗里来源 | Python大数据分析本文示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes1 简介长久以来,在使用matplotlib进行绘图时,一直都没有比较方便的办法像R中的ggtext那样,向图像中插入整…

Android如何使用读写cookie的方法

http://www.cnblogs.com/cosiray/archive/2012/06/25/2562117.html 可以使用SharedPreferences或者SQLite来保存用户信息 private static HashMap<String,String> CookieContinernew HashMap<String,String>() ;/*** 保存Cookie* param resp*/public void SaveCoo…

js 创建一条通用链表

js 创建一条通用链表什么是「链表科普」&#xff1f;链表是一种物理存储单元上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的。什么是「顺序存储结构科普」&#xff1f;在计算机中用一组地址连续的存储单元依次存储线性表的各个数据…

预训练时代微调新范式,高性能加速2800%,NLPer赶紧看过来!

导读PaddleNLP 是兼具科研学习和产业实践能力的 Python NLP 工具包&#xff0c;提供中文领域丰富的预训练模型和部署工具&#xff0c;被高校、企业开发者广泛应用。近日&#xff0c;PaddleNLP v2.1正式发布&#xff0c;为开发者带来三项重要更新&#xff1a;开箱即用的工业级NL…

图片服务器的url hash架构

什么是urlhash架构 url hash架构对url进行一次hash算法&#xff0c;然后通过hash结果找到对应的服务器。因为针对单一个url的hash结果是一样的&#xff0c;所以理论上这个url会被永久分配到固定的一台服务器上。另外因为经过了hash算法&#xff0c;所以分配url就很均匀&#xf…

Android系统--TouchEvent的处理流程

TouchEvent的处理流程就是TouchEvent在View树中的传递的过程&#xff1a;这个过程分为2步&#xff1a;第一步&#xff0c;ACTION_DOWN在View树中寻找处理TouchEvent的View;第二步&#xff0c;剩余的ACTION_XXX在View树传递给目标View; 第一步&#xff0c;ACTION_DOWN在View树中…

搜索引擎中的URL散列

散列&#xff08;hash&#xff09;也就是哈希&#xff0c;是信息存储和查询所用的一项基本技术。在搜索引擎中网络爬虫在抓取网页时为了对网页进行有效地排重必须对URL进行散列&#xff0c;这样才能快速地排除已经抓取过的网页。最理想的状态是对联网上所有的网页都分配一个哈希…

c++各种数据类型表示范围

符号属性 长度属性 基本型 所占位数 取值范围 输入符举例 输出符举例 -- -- char 8 -2^7 ~ 2^7-1 %c %c、%d、%usigned -- char 8 -2^7 ~ 2^7-1 %c …

原来Python用得好,工作这么好找

Python是多数平台上写脚本和快速开发应用的编程语言&#xff0c;适用场景非常广&#xff0c;Web开发、大数据分析、机器学习、自动化运维/测试&#xff0c;甚至日常工作中的各种各样的问题都能用Python来解决。Python不仅可以批量处理上百个Excel、Word、PDF文件&#xff0c;工…

Litmus代码质量平台实践总结

背景代码质量在项目开发中是一个很重要的地方&#xff0c;更好的质量的代码&#xff0c;能够产生更少的bug&#xff0c;也能使开发人员更不容易犯错&#xff0c;产品的质量得到提升。那么怎么定义代码质量&#xff0c;怎么测量以及如何展现就成为我们内部平台Litmus的主要探索领…

到底什么是hash?它起什么作用?

从emule诞生到现在也已经有了两年左右时间了&#xff0c;随着emule的普及&#xff0c;喜欢他的人也越来越多&#xff0c;但是由于emule对技术相应有一个门槛&#xff0c;不像bt那么容易上手&#xff0c;所以很多朋友很长时间以来一直都有这样或那样的疑问&#xff0c;今天是周末…

20个精美图表,教你玩转 Pyecharts 可视化

作者 |俊欣来源 |关于数据分析与可视化本篇文章我们将继续聚焦c模块并且用它来绘制精美的图表&#xff0c;希望读者在看完之后会有不少收获01内嵌饼状图内接一个环状的饼图&#xff0c;里面还有一个饼状的图(Pie().add(series_name"访问来源",data_pair[list(z) for …