个人对响应式布局的理解

从字面上理解，响应式布局即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

个人对响应式布局的理解相关推荐

响应式布局及案例练习
1. 内容引入为了让pc端.ipad端.移动端公用一套代码,我们引入了响应式布局效果可以看ibm.com网站,当你不压缩屏幕,是三列显示,当你向内压缩屏幕,就慢慢的二列,一列显示,,, 图示: ...
CSS - 响应式布局（一）媒体查询
目录响应式布局引子理解响应式网页和响应式布局原理媒体查询什么是媒体查询? 什么是媒体类型? 什么是媒体特性? 媒体查询语法仿三星官网首页响应式布局引子通过前面两节的学习 CSS - ...
判断两个图片的特征向量_响应式布局提高篇图片正确的打开方式
作者 | Brilliant Open Web团队编辑 | Aaron 本文承接上一章的内容,接着介绍响应式布局设计,主要讲如何实现响应式图片.通过对图片适配问题的说明,加深对响应式图片的理解,并分 ...
html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
SAP UI5 应用开发教程之三十三 - SAP UI5 应用的响应式布局特性(Responsiveness)试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
流体式布局与响应式布局_将固定像素设计转换为流体比例布局
流体式布局与响应式布局 Responsive web design has been a prime necessity for every enterprise ever since Google ...
html5/css3响应式布局介绍
转载链接:http://www.51xuediannao.com/html+css/htmlcssjq/694.html html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流 ...
移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
CSS3 @media媒体查询适配不同尺寸设备的响应式布局（清晰详解）
随着宽屏的不断普及,CSS3出现了@media媒体查询技术一.了解@Media 相关知识 1.了解Media Queries Media Queries能在不同的条件下使用不同的样式,使页面在不同在 ...

个人对响应式布局的理解

个人对响应式布局的理解相关推荐

最新文章

热门文章