css响应式有哪些常用布局_css响应式有什么布局

　　通常页面的下载是按照代码的排列顺序，而表格布局代码的排列代表从上向下，从左到右，无法改变。大家知道css布局吗?下面由学习啦小编为大家整理的css响应式布局，希望大家喜欢!

　　css响应式布局

　　一、什么是响应式布局?

　　响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

　　响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

　　二、响应式布局有哪些优点和缺点?

　　优点：

　　面对不同分辨率设备灵活性强

　　能够快捷解决多设备显示适应问题

　　缺点：

　　兼容各种设备工作量大，效率低下

　　代码累赘，会出现隐藏无用的元素，加载时间加长

　　其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果

　　一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

　　三、响应式布局该怎么设计?

　　我们在上面了解了什么是响应式布局，那在我们的实际项目中应该怎么去设计呢?在以往我们设计网站的时候都会受到不同浏览器的兼容性的困扰，现在还要来个不同尺寸设备，我们该怎么淡定下来呢?有需求就会有解决方案，呵呵，说到响应式布局，就不得不提起CSS3中的Media Query(媒介查询)，这可是个好东西，易用、强大、快捷……Media Query是制作响应式布局的一个利器，使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的界面。接下来就一起来深入的了解Media Query。

　　1、CSS中的Media Query(媒介查询)是什么?

　　通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。

　　2、media query能够获取哪些值?

　　设备的宽和高device-width，device-heigth显示屏幕/触觉设备。

　　渲染窗口的宽和高width，heigth显示屏幕/触觉设备。

　　设备的手持方向，横向还是竖向orientation(portrait|lanscape)和打印机等。

　　画面比例aspect-ratio点阵打印机等。

　　设备比例device-aspect-ratio-点阵打印机等。

　　对象颜色或颜色列表color，color-index显示屏幕。

　　设备的分辨率resolution。

　　3、语法结构及用法

　　@media 设备名 only (选取条件) not (选取条件) and(设备选取条件)，设备二{sRules}

　　示例一：在link中使用@media：

　　上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。

　　示例二：在样式表中内嵌@media：

　　@media (min-device-width:1024px) and (max-width:989px)，screen and (max-device-width:480px)，(max-device-width:480px) and (orientation:landscape)，(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}

　　在示例二中，设置了电脑显示器分辨率(宽度)大于或等于1024px(并且最大可见宽度为989px);屏宽在480px及其以下手持设备;屏宽在480px以及横向(即480尺寸平行于地面)放置的手持设备;屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。

　　从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内，srules为兼容设置的样式表，包含在中括号里面。only(限定某种设备，可省略)，and(逻辑与)，not(排除某种设备)为逻辑关键字，多种设备用逗号分隔，这一点继承了css基本语法。

　　4、测试Media Queries

　　最后，我们需要对我们刚刚设计的Media Queries进行测试，想要在不同设备上测试Media Queries的效果，可以使用一个浏览工具来检验不同尺寸屏幕下的显示效果，在这里为大家介绍一个不错的在线工具 – Responsivator，它可以模拟iPhone等各种不同设备，并且还可以自定义不同尺寸屏幕的显示效果，只需要输入一个url甚至是本地的一个url(如：http://127.0.0.1/)，就可以看到网站在不同尺寸屏幕下的显示效果。

　　5、通过Media Queries实现响应式布局设计

　　好了，我们明白了什么是Media Query，那我们一起来运用到响应式布局的设计项目中去。设计思路很简单，首先先定义在标准浏览器下的固定宽度(假如标准浏览器的分辨率为1024px，那么我们设置宽为980px)，然后用Media Query来监测浏览器的尺寸变化，当浏览器的分辨率小于1024px的时候，则通过Media Query预设的样式表来将页面的宽度设置为百分比显示，这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。

　　CSS页面布局

　　1、简介：为何使用表格排版是不明智的?

　　表格之所以存在于 HTML 中，只是为了一个目的：显示表格状的数据。然而此后的 border="0" 使得设计师可以将图片和文本放在这无形的网格中。迄今为止，表格仍然主导着视觉丰富的网站的设计方式，但它却阻碍了一种更好的、更有亲和力的、更灵活的，而且功能更强大的网站设计方法。

　　2、概览：这对我有什么用处?

　　我们将告诉你这样一种工作方式，它会：

　　使你的页面载入得更快

　　降低你的流量费用

　　让你在修改设计时更有效率而代价更低

　　帮助你的整个站点保持视觉的一致性

　　让你的站点可以更好地被搜索引擎找到

　　使你的站点对浏览者和浏览器更具亲和力

　　在世界上越来越多人采用 Web 标准时，它还能 提高你的职场竞争实力 (事实上也就是降低失业的风险)。

　　3、表格带来的问题

　　把格式数据混入你的内容中。

　　这使得文件的大小无谓地变大，而用户访问每个 页面时都必须下载一次这样的格式信息。

　　带宽并非免费。

　　这使得重新设计现有的站点和内容极为消耗劳力 (且昂贵)。

　　这还使我们保持整个站点的视觉的一致性极难，花费也极高。

　　基于表格的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力。

　　4、过渡性的设计

　　使用 margin 和 padding 来代替多余的表格单元和间隔 GIF。

　　使用 link 和 @import 来载入样式。前者用于早期浏览器，后者给现在的浏览器。

　　5、结构化标记：所写即所想，所想即所写

　　即便书写 CSS 很简单，使用 CSS 来排版却真的需要一种和我们以往有些不同的思维方式。

　　CSS制作网页误区

　　1、“节省代码”是营销手段，不是宗旨

　　“使用div布局可以比table布局节省更多的代码”，我在很多书籍和网站上见到过这句话。这句话本身是没错的，可以“节省代码”的确是网页标准化所带来的好处之一。然而切记，它只是“好处之一”，而不是“唯一好处”，更不是宗旨。“节省代码”更多的时候是我们用来说服那些顽固不化的老板的营销手段。网页标准化的唯一宗旨是“结构与表现分离”，而绝不是为了节省代码而节省代码。我曾经因为网站边栏甚至主体内容的表现形式相同而采用了统一的 class (至今还有一些书是这样教的)，这样的确比分别命名id更节省代码，然而这样做的代价是代码失去了良好的结构。失去良好结构的后果是：一、源代码没有了可读性;二、网站增加了未知的维护成本。试想，当某一块内容因为需要而作出表现形式的变动，例如链接的颜色等等，我们就不得不去修改页面源文件，增加额外的 class，工作量比起只需要调整id分组就大了许多。而且长此以往，结构将会越来越差，形成难以逆转的恶性循环。

　　2、ID是狙击枪，class是双刃剑

　　想要做好网页结构，id与class都是必须熟练掌握的，所谓“两手抓，两手都要硬”。ID就象狙击枪一样，可以帮助我们精准地定位要想要加载样式的元素;而class则是侠客的佩剑，信手拈来更加轻盈灵便，两者的结合能够实现结构良好且表现丰富的页面。然而现在有一种错误的观点，就是id完全可以用class来取代，事实上许多网页源代码也的确如此，打开来通篇class，找不到一个id。造成这种现象的理由有很多种，然而自table时代传下来的根深蒂固的“class=CSS”的观念才是本因。的确，class比id用途更广更灵活，但也必须意识到，class对于构建良好的网页结构远不如id有效。id的强制唯一性使得我们可以很容易通过id检索到我们需要的任意模块，而class则没有这个优势。虽然我们可以为模块定义唯一的 class名，但前提是——只有制作者本人可以动网页样式。否则换一个稍微懒一些伙计，看到样式相同便直接把前面的class拿来套用，其结果就是我们发现网页里有十几个模块都叫做“gonggao”或者“xinwen”，以至于为了区分还不得不加上大量的html注释，这样的结果显然并不是我们想要的。再者就是前面提到的，通过通用class所节省下来的代码，又不得不在每个单独定义的class中挥霍掉。

　　ID是狙击枪，class是双刃剑，合则两利，分则两败。

　　3、并不是所有的内容都需要div做“容器”

　　主菜单究竟是用

　　还是

　　?这是一个博弈的问题。至今这个问题也没有人能够给出明确的答案，就连我也是如此。诚然，

　　在只包含了一个

　　元素的时候，这个div就显得有些冗余，但有时候为了配合美工绚丽的设计，多一层标签就意味着多一层变化(有些人在a标签里套span也是如此)。而div不带任何原始属性的先天优势也是其它标签所无法比拟的。这个命题我只是想说明一件事，就是我们应该意识到，

　　之外，还有

　　这种写法，同样具有良好的结构和语义，并且省去了一层嵌套。在我们不需要为华丽的美工劳心劳神的时候，是不是也可以让结构更加简约呢?

　　这个命题其实还可以引申为——“并不是所有内容都需要块元素做容器”、“并不是所有链接都需要其它元素做容器”，例如很多页面都有的“更多”。有些人写做“

　　”，也有人写做

　　或者标签的时候，它们是否还有存在的必要?直接写成会破坏结构吗?会缺乏语义吗?会影响布局吗?换一种思路，你也许就会有不一样的收获。

　　4、工作上也做到“结构与表现分离”

　　关于这一点，网络上很多高手都是这样建议的，也就是先打开编辑器，把结构完整地写出来，再去CSS里写表现，而尽量不去动已经写好的结构。

　　然而以看书为主要学习方式的人却很难体会，因为关于标准的书籍多半是手把手来教的，也就是必然是结构表现结合，循序渐进。虽然有些书籍有这方面的建议，但短短的几句话远不如读书过程中的潜移默化。在制作人员能够对结构良好把握的时候，同时写结构与表现也不会对结果有太大的影响。但以我的经验，结构表现分离的工作方式，要比同时写结构与表现效率高很多，同时也不容易遗漏页面上的元素。

　　当然，所谓的“结构与表现分离”并不是完全不考虑表现，想要兼顾到表现，就要保证——在不破坏结构的前提下，CSS选择器能够选择到尽量多的内容。在哪些地方加class，或者用哪些标签来区分，是一个见仁见智的地方，相信每个人都有自己的体会。而结合不同的设计稿，有时候也需要做出相应的变化，然而这些变化都应该有一个同样的前提——不破坏代码的结构和可读性。

　　再就是，一定要意识到，任何可视化的工具都是魔鬼。它们可视化界面下所呈现的效果，往往与真实浏览器相差千里，而我们真正要兼容的是浏览器，不是编辑器的可视化界面。

　　5、CSS不是万能的，没有CSS也不是万万不能的

　　相比于CSS1.0时代，今天CSS可以完成更多的事情，然而需求永远是领先于技术的，CSS无法完成网页所有的表现层工作，有时候我们必须结合JS或者其他语言来实现一些效果。而另一些时候，用JS的方法比只靠CSS简单得多，并且代码结构更加良好——最典型的例子就是下拉菜单。这些时候，我们要说服自己，或者说服老板与客户，去采用更简单更合理的方式。因为DOM同样是网页标准的重要组成，并不是使用了JS我们的网页就降低了效率或是不再标准，恰恰相反，这是对JS最大的误解。说到这里不得不提一点，就是今天的时代，比以往更要求每个职业了解更多的相关知识，做设计的人要懂一点交互和制作，做制作的也必须了解设计和程序，尤其是JS这样的前端技术，只有这样，你和同事才能够更好地合作，个人的发展前景也会更加光明。

　　没有CSS，指的是当我们的网站因为各种未知的原因导致CSS文件载入失败，不要因此而慌乱，这是考验我们代码质量的最佳时机。在没有CSS的时候，如果网页仍旧保持良好的可读性，这成果要远比通过W3C验证更值得我们自豪。