个人对响应式布局的理解

从字面上理解,响应式布局即CSS布局随着屏幕尺寸的变换而变化。首先我们要搞清楚什么是固定布局,什么是流式布局。固定布局(Fixed Layout)使用固定宽度的包裹(Wrapper), 内部的各个部分可以使用百分比或者固定的宽度来表示. 这里最重要的是, 外面的所谓包裹层(或称为容器)的宽度是固定不变的, 所以不论访问者的浏览器是什么分辨率, 他们看到的网页宽度都彼此相同。流式布局(Fluid Layout 或 Liquid Layout), 主要使用百分比来设置各个部分的宽度, 用来适应不同的分辨率。对于网页中的某一部分元素(比如边界值, 侧边栏), 可以使用固定宽度, 但大部分元素是使用百分比来控制的。固定布局的宽度固定,不随浏览器窗口的大小变化,而流式布局的宽度会自动根据窗口的宽度进行调整,在Web设计人员中这是一个活跃的争论话题,许多人喜欢使用固定的网页宽度,因为这样可以在刻板的网格中精确地对齐页面元素,其他人则喜欢使用自动伸缩的网页宽度,让浏览者按自己的需要设置浏览器的宽度,网页自己也会相应地自动进行调整。固定布局和流式布局都有自己的明显优点,也有自己的潜在缺点,固定布局往往是一个更容易的选择,因为它从用CSS设计网站的复杂任务中又排除了一个不确定因素,但是使用固定布局时,如果浏览器窗口的宽度小于设计的宽度,则会出现讨厌的水平滚动条,如果而面宽度较窄的话,在较宽的窗口中显示时会浪费许多屏幕空间,流式而已会自动适用用户选择的窗口宽度,但在较宽的窗口中它会导致文本被拉伸为长长的一行,使页面内容难以阅读,而如果窗口非常窄的话,内容又会被压缩成窄窄的列,而且有些元素可能会彼此重叠。废话不多说,我说一下我对响应式布局的理解,它的优点是面对不同分辨率设备灵活性强,并且能够快捷解决多设备显示适应问题。下面我说一下实现响应式布局的几种方法,第一种,用百分比来定义尺寸;第二种,使用媒体对象,写法如下:@media (min-width:360px) and (max-width:1000px){} ,这句话表示当浏览器宽度最小为360px最大为1000px时执行以下布局;第三种,使用弹性盒子,即display:box,为了在多种浏览器上支持,box前要加-webkit-,-moz-,等前缀。还有一个办法--引用插件,例如Bootstrap,它的原生代码是通过媒体对象media写的。以上就是我对响应式布局的简单理解,不恰当的地方希望有大牛能指正出来,不甚感激。

转载于:https://www.cnblogs.com/SnowMonkey/p/5823712.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/489980.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jmeter 不同场景 比例_在JMeter测试中如何根据业务场景来控制运行比例

性能测试混合场景中,我们需要组合多个业务操作到场景中来。比如有一个论坛的业务分布如下:开新帖与回复帖子的比例为2:3,那么我们在JMeter测试计划中如何控制其比例呢?下面我们介绍两种方式:1.多线程组方式2.逻辑控制器…

python爬取新浪新闻首页_学习了《python网络爬虫实战》第一个爬虫,爬取新浪新闻...

请安装anaconda,其中附带的spyder方便运行完查看变量 1.进入cmd控制台, 输入 pip install BeautifulSoup4 pip install requests 2.编写代码,代码已经很清晰了,直接运行不会报错并有成功的结果def getNewsDetail(newsUrl): import requests f…

sql去重查询

例如,从 "Websites" 表的 "country" 列中选取唯一不同的值 SELECT DISTINCT country FROM Websites;

计算机和人类“看”法不同,但这重要么?

来源:大数据文摘“看”这个动作一直被认为是生物所独有的。当工程师第一次“教”计算机“看”这个动作时,他们理所当然地认为计算机可以像人类眼睛一样进行观看。约克大学(York University)计算机科学家约翰托索斯(Joh…

获取项目根路径,并在其下创建一个名称为userData 的目录。

NSArray *pathsNSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask,YES); NSString *documentsDirectory [paths objectAtIndex:0]; // 创建文件系统管理器 NSFileManager *fileManager [[NSFileManageralloc] init]; // 判断userData 目录是否存在 …

svn拉取文件合并_SVN的分支使用

使用过git版本管理的同学大部分都使用过分支,git创建切换分支非常直观,SVN则相对来说没有那么强的分支的概念。本文主要介绍SVN中的分支使用。SVN默认的生成目录如下通常 branches 目录下为开发分支,tags 目录为标签目录,trunk 为…

python编程入门单例_python实现单例模式怎么写啊?

这个网上有很多的,你可以搜一搜,单例设计模式很多面试官都会考的,最好是记住一两个,我下面写一个例子给你看一下 使用__new__方法 在__new__方法中把类实例绑定到类变量_instance上,如果cls._instance为None表示该类还…

超级智能的定义,一个已经诞生并不断深刻影响人类的新智能

来源:今日头条在人工智能领域,有一个不成熟的观点,认为当人工智能发展成为“在几乎所有领域都大大超过人类认知表现的任何智力”时,这时人工智能可以被视作超级人工智能或超级智能。但这种从人工智能延伸的超级智能因为在理论和实…

MySQL修改数据表存储引擎的3种方法介绍

看你的mysql现在已提供什么存储引擎:mysql> show engines;看你的mysql当前默认的存储引擎:mysql> show variables like %storage_engine%;你要看某个表用了什么引擎(在显示结果里参数engine后面的就表示该表当前用的存储引擎):mysql> show create table 表名; MySQL作…

linux suse 共享目录_SUSE环境下YAST源(连接共享目录)

很多台SUSE11版本的服务器都需要安装net-snmp包,我不想一个劲地插拔光盘,于是想办法写了这篇短文背景说明:实际情况是,有很多台suse11版本的服务器都需要安装net-snmp包,suse下的Yast服务可以解决包之间的依赖关系问题…

2019年人工智能行业现状与发展趋势报告

来源:前瞻产业研究院未来智能实验室是人工智能学家与科学院相关机构联合成立的人工智能,互联网和脑科学交叉研究机构。未来智能实验室的主要工作包括:建立AI智能系统智商评测体系,开展世界人工智能智商评测;开展互联网…

python自动化运维书籍推荐_《Python 自动化运维:技术与最佳实践》

第一部分 基础篇 第1章 系统基础信息模块详解 2 1.1 系统性能信息模块psutil 2 1.1.1 获取系统性能信息 3 1.1.2 系统进程管理方法 6 1.2 实用的IP地址处理模块IPy 7 1.2.1 IP地址、网段的基本处理 8 1.2.2 多网络计算方法详解 9 1.3 DNS处理模块dnspython 11 1.3.1 模块域名解…

memcache中的add和set方法区别

相信大家对memcache都不陌生,在项目中也经常使用memcache作为缓存方案,那么在使用过程中有没有发现为什么memcahce有两个添加缓 存的方法:一个是add,一个是set,那么你知道这2个方法有什么不同吗?什么时候该…

npm 全局安装vuecli报错_前端脚手架CLI生成模版命令工具(包括,npm包的发布,脚手架的搭建,注意事项,优化等)...

NodeJs的出现,让前端工程化的理念不断深入,正在向正规军靠近。先是带来了Gulp、Webpack等强大的构建工具,随后又出现了vue-cli和create-react-app等完善的脚手架,提供了完整的项目架构,让我们可以更多的关注业务&#…

sql的order by使用细节

SELECT column_name,column_name FROM table_name ORDER BY column_name,column_name ASC|DESC; 1、ORDER BY 多列的时候,先按照第一个column name排序,第一个column name相同时按照第二个column name排序 2、desc 或者 asc 只对它紧跟着的第一个列名有…

最新《科学》重磅!科学家喊你赶快关心自己的孩子:缺乏母爱会导致大脑基因改变...

来源:精准医学人人都有父母,而绝大多数人最终都将成为父母。在一切向“钱”看的蛮荒时代,人们往往似乎并不是那么重视对孩子的爱和关心,以为可以花钱就能够轻易解决这一问题。而解决方案也大多数千篇一律,无非是给他们…

用python画个三维地球_如何用Python制作三维散点图?

你可以用matplotlib为此,matplotlib有一个mplot3d模块,它将完全按照您的要求执行。from matplotlib import pyplot from mpl_toolkits.mplot3d import Axes3D import random fig pyplot.figure() ax Axes3D(fig) sequence_containing_x_vals list(ran…

计算机软考笔记之《数据库基础》

1、引言 1.1数据库和平面文件 数据的存储传统上是使用单独没有关联的文件,有时称为平面文件。 数据库是一些平面文件被组合成一个实体。 1.2数据库是什么? 数据库是一个组织内被应用程序使用的逻辑相一致的相关数据的集合。 1.3数据库的优点 1冗余较少 2…

ajax传值 实体类_ajax传参到实体类对应字段

之前看公司的代码,从页面ajax传参数到接口类,接口类用一个实体接收。我一直以为c#会自动识别,赋值到同名的字段。我曾和朋友讨论过,双方辩论。朋友认为c#没有这种功能,没有这样高级匹配的机制。而我因为在项目中使用的…