布局方式,css3响应式布局介绍及设计流程
分类:美高梅游戏官网网站

随着android和ios设备越来越普及,相应的响应式设计也越来越火。前段时间研究了amazon和国外的几个网站,总结了一些响应式的思路,正好最近company有个专题要制作,就顺着前段时间的研究,做了个响应式的专题,目前专题已完成,现总结下经验,贴出来以供参考,也希望大家给与指导。(专题地址:)

页面布局的方式总是随着技术的更新和创意的涌现不断的更新换代。从最开始的 固定布局「Fixed」到因为宽屏设备和移动互联网的普及产生的响应式和自适应,再到「Mobile First」的设计理念,前端们在可用性和适配性上做的贡献越来越多

html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能。移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题。

每个射击湿都想自己的网站可以在任何设备上体验都很牛,神马iPhone、ipad、黑莓、kindle……无所不能啊~ 苦逼的是这些东东的系统不一样,分辨率也不一样啊;电脑的屏幕越来越大,但是还有一半的用户还是用的17寸CRT;手机、pad层出不穷,没有个统一标 准,我们又不想失去任何一个用户,这可苦了我这些设计师了,需要付出更多的心血来获得更好的体验,谁让我们是射击湿呢。

响应式有三个核心的东西:

页面布局是css的一个重点应用

html5/css3响应式布局介绍

html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能。移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题。

一个普通的自适应显示的三栏网页,当你用不同的终端来查看这个页面的时候,他会根据几种终端来显示不同的样式,在电脑上是三列,在pad上应该也是 三列,在大屏手机上是三行,在屏幕小于320的手机上只显示主要内容,隐藏掉了次要元素。(这里关于响应式布局还有个比较好的消息,就是拖动浏览器也可以 触发判断条件,测试的时候你不需要去找一堆手机,只要把自己的浏览器窗口缩小到一定尺寸就可以了。)

我们认识下media query属性吧。

@media screen and (min-width: 320px) and (max-width : 479px)

就从这个条件语句开始介绍,media属性后面跟着的是一个 screen 的媒体类型(上面说过的十种媒体类型之一)。然后用 and 关键字来连接条件(其他关键字还有 not, only,看字面大家能理解,就不多说。),然后括号里就是一个媒体查询语句,稍微懂点css的同学都能看懂,这个条件语句意思是在大于320小于479 的分辨率下所激活的样式表。

这个语句,就是响应式布局的基础应用了。在判断终端分辨率大小之后,赋予不同的样式进去,就像我们的例子里

@media screen and (max-width : 320px){

body{...}

}

@media screen and (min-width: 800px) and (max-width: 1024px){

body{...}

}

至于要判断多少种分辨率,完全取决于你产品的需求,常见的分辨率有手机,平板(注意这些终端是存在 横屏 竖屏 区别的,这个下一篇里提),桌面显示器。自己为自己所面对的终端定制样式。

一般大于960的显示器都可以用默认样式而不必在媒体查询里判断了。有一种情况除外,就是高像素比的终端,比如 iphone4以上的retina屏,一个iphone5的小小的屏幕(iphone的屏幕是真小啊),他的分辨率竟然达到了1136*640,几乎等于 一个笔记本的分辨率。你在这样小的物理显示界面打开一个网页,他用1136的分辨率来显示,结果就是所有元素小的可怜。

在面对这种分辨率精细的终端,我们有另外一个条件查询语句 device-pixel-ratio。

比如例子里的

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

就是判断终端的像素比是2的话,所渲染的样式。iphone4以上像素比是2,高分辨率Andriod设备像素比是1.5,例子里只有像素比为2的查询,1.5的或者其他比例方法一样,前面用的是几种浏览器的私有属性,最后一种是通用属性,

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

等于

@media only screen and (min-device-pixel-ratio: 2)

为了一些版本的兼容性,不得已写的长了。

body{

font-size:24px;

}

.box2{

background: url(d/20.png) #ccc;

background-size:50%;

}

在像素比为2的终端里这样写的目的,就是让他显示的更容易识别,一般来说显示一张1px的背景图片,我们要准备一张2px的,然后再background-size:50%这样。1.5像素比同例。

比如上面的demo,如果你用iphone4以上的苹果手机来看,中间的背景图片应该是显示“2.0像素比”。


这里也暴露了响应式一个很大的缺点:需要多做若干背景图(作为内容显示的图片暂时无视,弹性图片与弹性字体,下次单独写一篇介绍博文介绍)。

对于media query的兼容性,我想不是很重要,因为很少有终端自带IE9以下的浏览器。基本都是高级浏览器。如果特殊需要,可以下载一个兼容的JS文件。

markdown

以条件注释的方式加在文件里。

=========================================


电子产品更新换代节奏都快成马了,跟都跟不上。对于网站来说根本不可能为每种设备都开发个版本出来,结果就是赢得鱼,却失去了熊掌,不过我们还是有办法的。

1、css3  的media query属性,这个是响应的一个基石

网页布局类型

html5/css3响应式页面的设计流程

第一步:确定需要兼容的设备类型、屏幕尺寸

通过用户研究,了解用户使用的设备分布情况,确定需要兼容的设备类型、屏幕尺寸。

设备类型:包括移动设备(手机、平板)和pc。对于移动设备,设计和实现的时候注意增加手势的功能。

屏幕尺寸:包括各种手机屏幕的尺寸(包括横向和竖向)、各种平板的尺寸(包括横向和竖向)、普通电脑屏幕和宽屏。

需要考虑的问题:

某个页面进行响应式设计时其适用的尺寸范围是哪些?比如,1688搜索结果页面,跨度可以从手机到宽屏,而1688首页,由于结构过于复杂,想直接迁移到手机上,不太现实,不如直接设计一个手机版的首页。

结合用户需求和实现成本,对适用的尺寸进行取舍。比如一些功能操作的页面,用户一般没有在移动端进行操作的需求,没有必要进行响应式设计。

第二步:制作线框原型

针对确定下来的几个尺寸分别制作不同的线框原型,需要考虑清楚不同尺寸下,页面的布局如何变化,内容尺寸如何缩放,功能、内容的删减,甚至针对特殊的环境作特殊化的设计等。这个过程需要设计师和前端开发人员保持密切的沟通。

第三步:测试线框原型

将图片导入到相应的设备进行一些简单的测试,可帮助我们尽早发现可访问性、可读性等方面存在的问题。

第四步:视觉设计

注意,移动设备的屏幕像素密度与传统电脑屏幕不一样,在设计的时候需要保证内容文字的可读性、控件可点击区域的面积等。

第五步:前端实现

与传统的web开发相比,响应式设计的页面由于页面布局、内容尺寸发生了变化,所以最终的产出更有可能与设计稿出入较大,需要前端开发人员和设计师多沟通。

响应式Web设计(Responsive Web design),理念是设计和开发应根据屏幕的大小、平台的用户的行为和环境基础上自动调整;他应该有一个灵活的网格和布局,图像和CSS能够智能的组合 使用。比如说用户从电脑切换到ipad,网站能够自动切换以适应分辨率,图像大小和脚本。换句话说,网站应该具备根据用户的使用环境来自动调整,这可以减 少不必要的重复设计。

2、弹性的布局

常见的布局方式大致有以下几种:

响应式Web设计的概念

3、弹性图片

  • 固定布局 【Fixed】
  • 流式布局 【Fluid】
  • rem布局 【Rem】
  • 弹性布局 【Flexbox】
  • 响应式布局 【Responsive】

Ethan Marcotte曾经在A List Apart发表过一篇文章Responsive Web Design,文中援引了响应式建筑设计的概念:

media query属性使用上次有说明,在此就不多做说明。

所谓响应式建筑设计就是设计师尝试建造一种使用一些传感器检测周围环境,比如说温度、湿度、光线等等自动进行调整的房子。现在我们把这个思路延伸到 WEB设计领域。我们可以想,为啥我们要为每个用户群各自打造一套设计方案呢?我们太笨了,有没有更智能的做法?和响应式建筑设计一样,web设计也应该 做到智能调整。

本人自己感觉,相应式布局的难点在2、3两点。弹性布局要求页面不能用前端最熟悉的px,只能用百分比,但是百分比会带来很多问题,很重要的一点就是图片拉伸和压缩的问题。图片拉伸是指图片的呈现不能比原始尺寸要大,其中包括一是不能变形,即宽和高的比例不能改变,二是图片不能拉伸的比原始图片更高或是更宽(假如图片的原始尺寸是100*50的,图片最宽只能是100,最高只能是50),这个在一般的布局下很好控制,但是在百分比布局和不同分辨率在一起的作用的就很难控制。需要拿着计算器仔细的计算了。

1. 固定布局 [px]

  顾名思义,页面上的所有元素的尺寸一律使用px,pt这种固定单位编写,在<head>里把

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

然后根据设计稿的宽高设定实现稿即可。
这种方式简单易上手,缺点显而易见,不能根据不同的屏幕做出不同的表现。例如直接设定主体宽度,然后居中展示,两边留白。宽屏两边留白多,窄屏两边留白少。

显然web设计不能使用传感器,这就要更多的抽象思维。好在现在一些概念已经得到实践了,比如液态布局、 帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式。

还有一点就是内容的组织,在小屏幕的情况下,一般采取两种方式来改变布局,一是隐藏内容,二是改变内容位置;这样就要求分清内容的主次,在一定的情况下舍弃什么样的内容。还有一点可能和UI设计师关系很大,因为页面在不同的分辨率下呈现的方式不一样,所以设计师要设计不同分辨率呈现样式,具体这个分辨率怎么决定,这次做的专题只是随便选择了几个,具体怎么选择,还没有深入研究,不过大体上选择的分级应该和现在市场上移动设备的分辨率及尺寸一致。

移动端使用固定布局
  1. viewport meta标签上设置content = “width=320”, 页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比例缩放, 从而刚好占满整个屏幕。这种方案类似弹性布局的rem。
  2. viewport meta标签上设置content=“width=640,user-scalable=no”,页面的各个元素采用px作为单位。由于手机浏览器的宽度小于640px(逻辑像素)(iphone plus系列为414px),所以浏览器viewport会自动缩放至全屏大小。经典案例:荔枝FM,人人都是播客的移动站

优势

  • 开发简单: 缩放交给浏览器,开发人员不需要自己操心,完全按照视觉稿切图
  • 还原精准: 绝对等比例缩放,可以精准的还原原始视觉效果(会有清晰度的失真)
  • 测试方便: 可以在pc端实现大部分的测试工作,即开发人员自己就能完成测试的大部分工作,手机端只要修改一些细节。

劣势

  • 像素丢失: 对于一些分辨率较低的手机,可能设备像素还未达到viewport指定的宽度,此时可能出现边框丢失等问题。现代手机基本不会发生这种情况。
  • 缩放失效: 早期android手机不能根据meta中的width来进行缩放,需要配合initial-scale。这种完全依赖浏览器的方式也难免可能发生异常。
  • 文本折行: 会发生在缩放失效的机型中。

调整分辨率

这个做的只是一个尝试,在此贴出作专题的一些小小的总结,希望不吝赐教。

2. 流式布局 [%]

 网页中主要使用百分比(%)来划分区域,往往配合max-*,min-* 等属性控制尺寸流动范围以免过大或者过小影响阅读,让不同分辨率屏幕尽可能实现自适应。
例如,设置网页主题宽度为80%,min-width为960;图片也做类似处理(例如 width:100%; max-width:图片原始尺寸,防止拉伸)。这种开发方式在早期的web开发时用来对应不同的PC屏幕(那时不会相差太大),现在也常用在移动端开发上

缺点

  • 宽度使用百分比定义,但高度和文字大小都是用px来固定,所以在大屏幕手机下的显示效果有些元素(例如width=100%)会被拉伸的很长,但是高度,文字大小还是和原来一样(即有些元素无法变得流式,显得很不协调)。

不同的设备都有各自的屏幕分辨率、清晰度以及屏幕定向方式,不断被研发的各种新设备也将出现新的屏幕尺寸规格。有些设备 基于横屏 (portrait),有些是竖屏(landscape),甚至还有正方形;对于日益流行的iPhone、iPad及其他一些智能手机、平板电脑,用户还 可以通过转动设备来任意切换屏幕的定向方式。怎样才能做到让一种设计方案满足所有情况?

 

3. rem布局

REM,即font size of the root element,使用 rem 单位进行相对布局,通过根元素进行适配,它好比是一个中介,通过它计算出页面真正要展示的大小, 达到自适应效果。(有时需要配合媒体查询),常用于移动端开发。
rem避免了根据 px 布局在高分辨率下几乎无法辨认的缺点,又相对 % 百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示。一般编写时需要对UI稿做转换,也有编辑器可以安装单位转换插件。例如 ATOM 的 px2rem 插件
  实现 rem 的核心,就是针对并监听不同尺寸的手机屏幕计算出相应的比例,以下代码通常写在app.js(第一个加载的js文件)最上方:

// rem布局的核心代码。 此例默认UI稿按 1080 * 1920 提供
(function(win, doc){
    var docEl = doc.documentElement,
        resizeEvt = 'oritationchange' in window ? 'oritationchange' : 'resize',
        recalc = function(){
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth < 640) {
                docEl.style.fontSize = 100 * (clientWidth / 1080) + 'px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
        }
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DomContentLoaded', recalc, false);
})(window, document)

解释一下:

  1. 当浏览器将我们的项目下载完成时,开始解析DOM树,触发doc.addEventListener('DomContentLoaded', recalc, false),执行recalc方法,计算出当时条件下的适配比rem,执行页面渲染。当用户手机屏幕发生横竖屏翻转时,BOM捕捉到事件变化, 触发win.addEventListener(resizeEvt, recalc, false)执行recalc方法,重新计算新的适配比rem,页面响应变化。
  2. if (clientWidth < 640 ) 监控并区分用户手机屏幕是处在横竖屏什么状态下,640px是手机屏幕的最大安全宽度,超过640就认为是横屏状态。
  3. 至于缩放比是要设置 100,10 还是 24(移动端常用大小),你开心就好。 总之,计算规则就是 【 1px * 缩放比 == 1rem 】

这种布局方式编写简单,适配能力强,容易理解,易于维护。

图片 1

 

# 但 rem也不是万能的,比如:
  1. 用户修改字体大小,使得某些元素不能展示原有效果出现换行现象。
  2. 用户修改显示模式,触发逻辑像素被改变,rem布局不能感知这种状态,会出现元素偏移的现象
  3. 当用户切换横竖屏需要展示不同效果时,rem无法实现。
    解决办法:问题1 可以配合css位置属性 或局部使用其他的的布局方式(如以下将要介绍的 flex布局)调整恢复;问题2可以使用vw/vh单位局部切换实现样式;问题3 可以使用媒体查询 或通过js动态修改样式。

要想做到同时兼容横、竖屏(用户还有可能在页面加载的过程中切换方向),我们就必须考虑N种屏幕尺寸规格。我们可以将 这些规格划分为几个大类,然后为每一类做一种方案,确保该方案至少在本组中尽量具有弹性。但即使这样,结果也将是非常不爽的,谁知道某类设备在5年之后的 占有率是多少?而且很多用户甚至不去将浏览器的窗口最大化;天哪,哥受不了了……

...

4. 弹性布局 [flex]

  flex布局是W3C在2009年提出的方案。 传统的布局方式,基于盒模型,依赖于display + position + float 等属性,他们对于特殊布局非常不方便,比如垂直居中。而flex可以为盒模型提供最大的灵活性。
任何一个容器都可以指定为flex布局,包括行内布局。如果是webkit内核,必须加-webkit- 前缀

<div class="box">

</div>

.box {
    -webkit-display: flex;
    display: flex
}
span {
    display: inline-flex;
}

注意:设置为Flex布局以后,子元素的float,clearvertical-align属性将会失效。

Morten Hjerde和他的哥们对2005至2008年市场中的400余种移动设备进行了统计(查看报告),下图为大致统计结果:

# flex基本概念: ‘容器’ - ’项目’ - ’轴’

flex布局结构示意图

  • axis】: 水平的主轴 main axis 的起始位置为 main start ,结束的位置为main end; 垂直的交叉轴 cross axis 的起始位置为 cross start,结束位置为 cross end
  • 容器flex container】和 项目flex item】: 项目在容器内部,默认沿着主轴排列,单个项目占据主轴为main size, 占据交叉轴为 cross size;容器可以简单理解为父元素,项目可以简单理解为子元素

项目其实可以理解为 子容器,对于flex,核心点只有两个:容器 和 轴

图片 2

# 为容器增加属性 -【父元素】

1. flex-direction (元素排列方向),可选值:(默认)水平、水平右到左、垂直、垂直下到上

.box {  flex-direction: row | row-reserve| column | column-reserve  }

2. flex-wrap (元素的换行方式),可选值:(默认)不换行、往下换行、往上换行(第一行在下方)

.box {  flex-wrap: nowrap | wrap | wrap-reserve  }

3. flex-flow (以上两者的简写),默认为: 水平 || 不换行

.box {  flex-flow: flex-direction || flex-wrap  }
// 例
.box {  flex-flow: row nowrap;  }

4. justify-content (主轴对齐方式),可选值:(默认)左对齐、右对齐、居中、充满两边靠边、充满两边留边

.box {  justinfy-content: flex-start | flex-end | center | space-between | space-around  }

5. align-items (交叉轴对齐方式),可选值:上对齐、下对齐、中部对齐、(默认)拉伸至上下占满、首行文字的基线对齐

.box {  align-items: flex-start | flex-end | center | stretch | baseline  }

6. align-content (多根轴线的对齐方式) 可选值:上对齐、下对其、中部对齐、(默认)均匀拉伸至上下占满、充满上下中部均分、充满上下两边留空中部均分

.box {  align-content: flex-start | flex-end | center | stretch | space-between | space-around  }

在08年之后,更多更有代表性的新设备问世并普及了。显然,我们不可以沿着多方案的思路继续走下去;那么我们应该怎样做呢?

# 为项目增加属性 -【子元素】

1. order (项目的排列顺序),可选值: 数值(越小越靠前,相同按文档流顺序展示)

,item {  order: <integer>;  }   /* default 0 */

2. flex-grow (项目的放大比例),可选值:数值(0表示按原大小展示;都定义为1表示所有项目均分可用空间;定义某个为2其余都为1,则2的占用1的两倍然后所有项目占满空间)

.item {  flex-grow: <number>;  }   /* default 0 */

3. flex-shrink (项目的缩小比例),可选值:数值(0表示按原大小展示;都定义为1表示空间不足时等比缩小;定义某个为0其余都为1,空间不够时0的不缩小,其余按等比缩小。负值无效)

.item {  flex-shrink: <number>;  }    /* default 1 */

4. flex-basic (项目占用主轴空间), 可选值:(根据flex-direction定义的主轴(水平或垂直)来定义项目本来的大小,跟width/height一样;如果设定跟widthheight一样的值,则项目将占据固定空间)

.item {  flex-basic: <length> | auto;  }    /* default auto */

5. flex (前三者的简写【推荐】),可选值:auto (1 1 auto) 、none (0 0 auto)、自定义值(n, n, length);auto表示空间大了自动放大,空间小了自动缩小;none表示无论空间如何,大小固定不变。推荐优先使用autonone

  /* default  0 1 auto ; 空间大了保持不变,小了自动缩小*/
.item {  flex: auto | none | [<'flex-grow'> <'flex-shrink'>? || <'flex-basic'>]  }

flex

5. align-self (某项目和其他项目不一样的对齐方式,覆盖align-item),可选值:auto(继承父元素align-items)、上对齐、下对齐、中部对齐、首行文字基线对拉伸;要区分align-items是设置在容器上的属性,align-self是设置在项目上的属性。

  /* default auto */
.item {  align-self: auto | flex-start | flex-end | center | baseline | stretch;  }

部分解决方案:一切弹性化

# flex 总结

flex属性树

几年前,弹性布局(flexible layout)几乎是一种奢侈品,所谓弹性,也只是体现在竖排布局以及字号等方面;图片尺寸无法变化,这就导致图片破坏了页面结构,而且即使是有弹性的元 素,在很多情况下他会乱弹,仍然是一塌糊涂。所以,所谓的弹性布局其实并非那样弹性,它有时甚至不能适应台式机与笔记本的屏幕分辨率差异,更不用说手机等 移动设备了。

5. 响应式布局 [media query]

  响应式布局的设计思路和其他布局思路大同小异,都是为了同一套代码适配不同媒体设备。因为由于越来越多的移动设备加入到互联网大军中,移动端将不能再被忽视,移动终端的分辨率和pc端有较大差异,为了让用户的体验更好,代码就需要兼容不同的屏幕。

  主要分两类: RWD响应式 和 AWD自适应,

  • RWD = (Responsive Web Design):media query + 流体布局 + 自适应图片/视频资源
  • AWD = (Adaptive Web Design):media query + js 操作dom + 在服务端操作dom
    这里主要介绍响应式:
      很粗糙的解释,步骤大致是:
  • 编写非响应式代码(适配主要屏幕的设备代码,遵循 Mobile First
  • 加工成响应式代码 (增加媒体查询语句)
  • 响应式细节处理,代码自测
  • 完成响应式开发

现在,我们可以通过响应式的设计和开发思路让页面更加弹性了。图片的尺寸可以自动调整,页面布局再不会被破坏。虽然永远没有最完美的方案,但它给了我们更多选择。无论用户切换设备的屏幕定向方式,还是从台式机屏幕转到iPad上浏览,页面都会真正的富有弹性。

# 实现响应式布局设计具体步骤

1.布局及设置meta标签

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

  主要是为了让代码适应移动端的屏幕。解释一下,viewport是指需要加载meta标签时读取的名字为‘视口’,其中,width等于设备的宽度device-width,是为了告诉浏览器,将布局视口的宽度设置为设备理想的宽度,initial-scale=1(缩放比例)保证加载的时候,要获取设备的宽度,同时要保持原始大小,便于媒体查询。user-scalable=no指定不允许用户缩放屏幕。

2. 通过媒体查询来设置响应式样式
  media query 是响应式布局的核心,他们够和浏览器进行沟通,告诉浏览器页面改如何呈现,假如要适配一个大小为414逻辑像素的屏幕(iphone6 plus),应该这么写:

我喜欢设置范围,也可以设置具体值:(max-width: 414px)
@media screen and (max-width < 500) {
    .my_class {
        font-size: 24px;
        color: #3d77e0;
    }
}

然后我们将该片段放置在样式文件的尾部,以保证覆盖非响应代码的样式。再如:假如我们要兼容iPad和iphone,应该这么设置:

@media screen and (min-width>768px) and (max-width<1024px) { }   // ipad
@media screen and (min-width>320px) and (max-width<767px) { }    // iphone

3. 字体设置-推荐rem
  在css3之前,大部分开发人员使用的都还是px,但px是绝对单位,并不能响应随着屏幕变化而变化的父容器,css3引入了rem,完美解决此问题。注意不要忘记响应变化时重置根元素的大小。

html { font-size: 24px; }
@media ( min-width>640px ) { html {font-size: 28px} body { font-size: 1.2rem } }
@media ( min-width>767px ) { html {font-size: 32px} body { font-size: 1.2rem } }
@media ( min-width>960px ) { html {font-size: 36px} body { font-size: 1.2rem } }
其实这里就是使用的rem布局的知识,不理解的建议回头看看rem布局。

4.需要注意的点
(1):宽度不能固定,可以使用百分比,即流体(fluid grids)

body { width: 100%; }
.content { width: 50%; }

(2):图片处理
  html中的图片,为了最大化让图片保持原始效果,可以如下这么设置:

.wrap img {
    width: auto;
    max-width: 100%;
    height: auto;
}

这么设计是为了:当图片小于给定空间时按原始尺寸显示,当超出时就缩小至容器大小。

  • 除了img标签的图片外我们经常会遇到背景图片,比如logo做背景,可以这么设置:
.box {
    background: url('icon/logo.png') no-repeat;
    background-size: 100% 100%;  // css3
}

background-size 是css3新增的属性,用来设置背景图片的大小,有两个可选值,表示widthheight,如果只指定一个,另一个则为auto。设置100% 100%使图片总是充满元素容器,这有可能使得图片变形。另外
background-size: cover; 表示等比扩充比例用来填满元素,这有可能使得图片内容显示不全,但不会被拉伸或挤压。
background-size: contain; 表示等比缩小比例来适应元素的尺寸,则有可能使得元素容器部分区域空白。

  • 还可以使用::before::after伪元素 + content 属性来动态显示一些内容。  

在前文提到的Ethan Marcotte的文章中,他通过一个实例展示了响应式Web设计在页面弹性方面的特性:

6. 最后 但同样重要

  自习对比几种布局方式可以发现,各大布局并不独立,反而相辅相成,互相渗透,想单独用某种布局来实现一个产品很难,我们也没必要这么做。
  目前采用最多的是 rem布局 + 响应式布局的 media query,基本能实现较为复杂的页面效果,当然还有一些效果如垂直居中,也能引入弹性布局flex来实现;容器、图片、背景图片设置,流式布局的效果相对好一些;如果没有特殊需求,尽量还是少用绝对布局,坑太多不好维护。
  总之,遵循一个原则,结合具体需求,那种适配性高些,哪种后期维护容易些,就使用哪种。

# 最后的最后,但不重要
  我的下一篇文章: 《布局的具体设计与实现》,如果觉得我写的还不错的朋友,可以关注我,我们一起成长。

图片 3

该实例的实现方式完美的结合了液态网格和液态图片技术,并且聪明的在正确的地方使用了正确的HTML标记。液态网格是一种很常见的实现方式;对于液态图片技术,下面的文章做了不错的介绍:

  • Hiding and Revealing Portions of Images
  • Creating Sliding Composite Images
  • Foreground Images That Scale With the Layout

说到创建液态页面,最好看看Zoe Mickley Gillenwater的那本《Flexible Web Design: Creating Liquid and Elastic Layouts with CSS》 怎样创建弹性图片。另外,Zoe的这篇Essential Resources for Creating Liquid and Elastic Layouts.提供了不少关于创建弹性网格和布局的教程、资源、创意指导和实现方式。

从技术角度讲,虽然听上去这些都很简单,但它着实相当复杂。举个例子,仔细观察Ethan Marcotte提供的实例中的logo图片:

图片 4

如果我们将浏览器窗口不断调小,会发现logo图片的文字部分始终会保持同比缩小,保证其完整可读,而不会和周围的插图一样被两边裁掉。所以整个logo其实包括两部分:插图作为页面标题的背景图片,会保持尺寸,但会随着布局调整而被裁切;文字部分则是一张单独的图片。

<h1 id="logo"><a href="#"><img src="site/logo.png" target="_blank" closure_uid_lds9ka="1914">液态图片一文中也有提到。

img { max-width: 100%; }

只要没有其他涉及到图片宽度的样式代码覆盖掉这一行规则,页面上所有的图片就会以其原始宽度进行加载,除非其他设备可视 部分的宽度小于图片的原始宽度。上面的代码确保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度,所以当窗口或容器的可视部分开始变窄时,图片 的最大宽度值也会相应的减小,图片本身永远不会容器边缘隐藏和覆盖。实际上,就像Jason Grigsby在他的CSS Media Query for Mobile is Fools Gold一文中提到的,液态图片背后的思路,就是无论何时,都确保在其原始宽度范围内,以最大的宽度同比完整的显示图片。我们不必在样式表中为图片设置宽度和高度,只需要让样式表在窗口尺寸发生变化时辅助浏览器对图片进行缩放。 一种简而美的方法。

图片本身的分辨率及加载时间是另外一个需要考虑的问题。虽然通过上面的方法,可以很轻松的缩放图片,确保在移动设备的窗口中可以被完整浏览,但如果原始图片本身过大,便会显著降低图片文件的下载速度,对存储空间也会造成没有必要的消耗。

响应式图片

由Filament Group提出的响应式图片技术思想,有助于解决上面提到的问题:不仅要同比的缩放图片,还要在小设备上降低图片自身的分辨率。可以看下demo页面先。

图片 5

这个技术的实现需要使用几个相关文件,我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js),一个.htaccess文件,以及一些范例资源文件。具体使用方法可以参考Responsive Images的说明文档。 大致的原理是,rwd-images.js会检测当前设备的屏幕分辨率,如果是大屏幕设备,则向页面head部分中添加BASE标记,并将后续的图片、脚 本和样式表加载请求定向到一个虚拟路径/rwd-router。当这些请求到达服务器端,.htacces文件会决定这些请求所需要的是原始图片还是 小尺寸的响应式图片,并进行相应的反馈输出。对于小屏幕的移动设备,原始尺寸的大图片永远不会被用到。

<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

Date-fullsrc``是html5中的一个定义文件的属性,宽度超过480px的屏幕,就会加载较大分辨率的图片(largeRes.jpg),小屏幕分辨率的就会加载较小的图片(smallRes.jpg)。

JS文件中插入一个基本元素,允许页面将图像重新定向,当页面加载时只是加载适合屏幕分辨率的图片,而其他图像不会被下载。尤其是带有大量图片的网站,这种技术可以节省很大的带宽和加载时间。

这项技术支持多数的现代浏览器,包括IE8+、Safari、Chrome和Opera,以及这些浏览器的移动设备版本;在FireFox及一些旧浏览器中,则会优雅降级:我们仍可得到小图片的输出,但同时,原始大图也会被下载。

禁用iPhone中的图片自动缩放

在iPhone及iPod Touch中,页面会被自动的同比例缩小至最适合屏幕大小的尺寸,x轴不会产生滚动条,用户可以上下拖拽浏览全部页面,或在需要的时候放大页面的局部。这 里会产生一个问题,即使我们运用响应式Web设计的思想,专门为iPhone的小屏输出小图片,它同样会随着整个页面一起被同比例缩小,如下图左侧所示。

图片 6

我们可以使用苹果专有的一些meta标记来解决类似的问题。在页面的<head>部分添加以下代码(详情可以参考Think Vitamin的相关文章):

<meta name="viewport" content="width=device-width; initial-scale=1.0">

将initial-scale的值设定为1″,即可覆写默认的缩放方式,保持原始的尺寸及比例。更多关于viewport meta标记的用法,可以参考苹果官方的文档。

打造布局结构

当页面所需要适应的不同设备的屏幕尺寸差异过大时,除了图片方面,我们也应该考虑到整个布局结构的智能化调整;我们可以 使用独立的样式表,或者更有效的,使用CSS media query。这不会引起多大的麻烦,多数样式设定不会被影响和改变,只有一些特定的元素会通过浮动、宽度和高度等的设置来改变位置。

我们可以使用一个默认主样式表来定义页面的主要结构元素,比如#wrapper、#content、#sidebar、#nav等的默认布局方式,以及一些全局性的配色和字体方案。

我们可以监测页面布局随着不同的浏览环境而产生的变化,如果它们变的过窄过短或是过宽过长,则通过一个子级样式表来继承主样式表的设定,并专门针对某些布局结构进行样式覆写。我们来看下代码示例:

下面的代码可以放在默认主样式表style.css中:

/* Default styles that will carry to the child style sheet */html,body{ background... font... color...}h1,h2,h3{}p, blockquote, pre, code, ol, ul{}/* Structural elements */#wrapper{ width: 80%; margin: 0 auto; background: #fff; padding: 20px;}#content{ width: 54%; float: left; margin-right: 3%;}#sidebar-left{ width: 20%; float: left; margin-right: 3%;}#sidebar-right{ width: 20%; float: left;}下面代码可以放在子级样式表mobile.css中,专门针对移动设备进行样式覆写:#wrapper{ width: 90%;}#content{ width: 100%;}#sidebar-left{ width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px;}#sidebar-right{ width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px;}*/

大致的视觉效果如下图所示:

图片 7

Media Queries

CSS3支持CSS2.1所支持的所有媒体类型,例如screen、print、handheld等,同时添加了很多涉 及媒体类型的功能属性,包括 max-width(最大宽度)、device-width(设备宽度)、orientation(屏幕定向,横屏或竖屏)和color。在CSS3发布 之后出现的新玩具,如iPad或Android相关设备,都可以完美的支持这些属性。所以我们可以通过media query为新设备设置独特的样式,而忽略那些不支持CSS3的台式机中的旧浏览器。

在Ethan的文章中,我们能看到一段media query使用实例:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />

代码本身可以很好的说明工作机制:如果页面通过屏幕呈现(非打印一类),并且屏幕宽度不超过480px,则加载shetland.css样式表。要了解更多关于CSS3媒体新属性的信息,可以参考The Orientation Media Query一文。

我们可以创建多个样式表,以适应不同设备类型的宽度范围。Ethan的文章中的Meet the media query部分有更多的范例及解释。更有效率的做法是,将多个media queries整合在一个样式表文件中:

/* Smartphones (portrait and landscape) ----------- */@media only screenand (min-device-width : 320px)and (max-device-width : 480px) {/* Styles */}/* Smartphones (landscape) ----------- */@media only screenand (min-width : 321px) {/* Styles */}/* Smartphones (portrait) ----------- */@media only screenand (max-width : 320px) {/* Styles */}

上面的代码来自于Andy Clark创建的可以兼容各种主流设备的免费模板。这样整合多个media queries于一个样式表文件的方式,与通过media queries调用不同样式表的方式之间的区别与联系,可以参考Hardboiled CSS3 Media Queries一文。

CSS3 Media Queries

上面演示的一些代码范例是CSS2.1与CSS3通吃的。现在让我们来看看怎样使用CSS3专有的media queries功能来创建响应式Web设计。其中某些方法在当前就有切实的使用价值,不久的将来则一定会全部派上用场。

min-width和max-width这两个属性很靠谱。通过min-width的设置,我们可以在浏览器窗口或设备屏幕宽度高于这个值的情况下,为页面指定一个特定的样式表;max-width则反之。

下面的几个示例中,我们使用的是将多个media queries整合在单一样式表中进行编码的句法。如前文所述,这样做更加高效,减少请求数量。

@media screen and (min-width: 600px) { .hereIsMyClass { width: 30%; float: right; }}

上面代码中定义的类(hereIsMyClass)只有在浏览器或屏幕宽度超过600px时才会有效。

@media screen and (max-width: 600px) { .aClassforSmallScreens { clear: both; font-size: 1.3em; }}

而这段代码的作用则相反:aClassforSmallScreens类只有在浏览器或屏幕宽度小于600px时才会有效。

可以看出min-width和max-width可以同时判断设备屏幕尺寸与浏览器实际宽度。有些时候,我们希望通过 media queries作用于某种特定的设备,而忽略其上运行的浏览器是否由于没有最大化而在尺寸上与设备屏幕尺寸产生不一致的情况。这时,我们需要使用min-device-width与max-device-width,用来判断设备本身的屏幕尺寸。

@media screen and (max-device-width: 480px) { .classForiPhoneDisplay { font-size: 1.2em; }}@media screen and (min-device-width: 768px) { .minimumiPadWidth { clear: both; margin-bottom: 2px solid #ccc; }}

还有一些其他方法,可以帮我们有效的使用media queries锁定某些指定的设备。可以参考下面两篇出自Thomas Maier的文章:

CSS for iPhone 4 (Retina display)

How To: CSS for the iPad

对于iPad来说,orientation属性尤其有用。它的值可以是landscape(横屏)或portrait(竖屏)。

@media screen and (orientation: landscape) { .iPadLandscape { width: 30%; float: right; }}@media screen and (orientation: portrait) { .iPadPortrait { clear: both; }}

不幸的是,这个属性目前确实只在iPad上有效。对于其他可以转屏的设备,譬如iPhone,可以使用min-device-width和max-device-width来变通实现;详情可以参考Determine iPhone orientation using CSS一文。

我们还可以将上述属性组合使用,来锁定某个屏幕尺寸范围:

@media screen and (min-width: 800px) and (max-width: 1200px) { .classForaMediumScreen { background: #cc0000; width: 30%; float: right; }}

上面的代码可以作用于浏览器窗口或屏幕宽度在800px至1200px之间的所有设备。

其实,很多设计师和开发者仍会选择使用多个样式表的方式来实现media queries。如果从资源的组织和维护的角度出发,其益处确实高于效率的损耗的话,那么这样做也完全不坏:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /><link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" /><link rel="stylesheet" media="print" href="print.css" />

所以呐,凡事没有绝对,最好根据实际情况决定使用media queries的方式。比如,对于iPad,我们可以将多个media queries直接写在一个样式表中。因为iPad用户随时有可能切换屏幕定向,这种情况下,要保证页面在极短的时间内响应屏幕尺寸的调整,我们必须选择 效率最高的方式。

JavaScript

JavaScript也是我们的武器之一,特别是当某些旧设备无法完美支持CSS3的media query时,它可以作为后备支援。幸运的是,已经有专门的JS库来帮助旧浏览器(IE 5+,Firefox 1+,Safari 2等)支持CSS3的media queries。使用方法很简单,下载css3-mediaqueries.js并在你的页面中调用它。

而下面的代码则演示了怎样使用简单的几行jQuery代码来检测浏览器宽度,并为不同的情况调用不同的样式表:

<script type="text/javascript" src=" type="text/javascript"> $(document).ready(function(){ $(window).bind("resize", resizeWindow); function resizeWindow(e){ var newWindowWidth = $(window).width(); // If width width is below 600px, switch to the mobile stylesheet if(newWindowWidth < 600){ $("link[rel=stylesheet]").attr({href : "mobile.css"}); } // Else if width is above 600px, switch to the large stylesheet else if(newWindowWidth > 600){ $("link[rel=stylesheet]").attr({href : "style.css"}); } } });</script>

类似这样的解决方案还有很多。所以我们要清楚,media queries不是一个绝对唯一的答案,它只是一个以纯CSS方式实现响应式Web设计思路的手段。借助JavaScript,我们则可以实现更多的变化。这篇Combining Media Queries and JavaScript向我们展示了JavaScript配合media queries的更多细节信息。

显示或隐藏内容

通过前文的学习,我们已经了解到,对于响应式Web设计,同比例缩减元素尺寸以及调整页面结构布局,是两个重要的方式方 法。但是对于页面中的文字内 容信息来说,则不能简单的只从同比缩小和调整布局结构这两方面去处理。对于手机等移动设备来说,在文字内容方面,已经有了很多最佳实践方式和指导 原则:简化的导航、更易聚焦的内容、以信息列表代替传统的多行文案内容等。

图片 8

响应式Web设计的思想,一方面要保证页面元素及布局具有足够的弹性,来兼容各类设备平台和屏幕尺寸;另一方面,则是增强可读性和易用性,帮助用户在任何设备环境中都能更容易的获取最重要的内容信息。

有一条样式代码,我们已经使用了多年:

display: none;

我们可以在一个针对某类小屏幕设备的样式表中使用它来隐藏掉页面中的某些块级元素,也可以使用前文的方法,通过JS判断 当前硬件屏幕规格,在小屏幕设备的情况下直接为需要隐藏的元素添加工具类class。比如,对于手机类设备,我们可以隐藏掉大块的文字内容区,而只显示一 个简单的导航结构,其中的导 航元素可以指向详细内容页面。

注意,不要使用visibility: hidden的方式,因为这只能使元素在视觉上不做呈现;display属性则可帮助我们设置整块内容是否需要被输出。对于移动设备来说,避免这些不必要的资源浪费还是很重要的。我们来看一个简单的示例:

图片 9

图中上半部分是大屏幕设备所显示的完整页面,下面的则是该页面在小屏幕设备的呈现方式。页面HTML代码如下:

<p><a href="#">Left Sidebar Content</a> | <a href="#">Right Sidebar Content</a></p><div id="content"> <h2>Main Content</h2></div><div id="sidebar-left"> <h2>A Left Sidebar</h2></div><div id="sidebar-right"> <h2>A Right Sidebar</h2></div>

下面是默认的主样式表,其中,我们要隐藏掉链接导航部分(sidebar-nav),因为默认样式适用的设备屏幕会足够大,足够显示包括两个侧边栏在内的所有内容。

#content{ width: 54%; float: left; margin-right: 3%;}#sidebar-left{ width: 20%; float: left; margin-right: 3%;}#sidebar-right{ width: 20%; float: left;}.sidebar-nav{display: none;}

下面是用于小屏幕移动设备的样式表代码。现在,我们要隐藏掉两个侧边栏,并使sidebar-nav显示出来。借助 JavaScript,当用户点击sidebar-nav中的链接时,对应的侧边栏可以恢复显示。当然,触发恢复显示的方式有很多种,即可以通过JS改变 侧边栏的display属性值, 也可以为其添加额外的布局样式。

#content{ width: 100%;}#sidebar-left{ display: none;}#sidebar-right{ display: none;}.sidebar-nav{display: inline;}

现在,我们的页面已经可以随着设备和屏幕规格的变更,响应式的做到元素的同比缩放、布局结构的改变、内容的优化调整。特 别是对于手机设备,我们还要 在实践过程中注意一些该类设备共有的设计指导原则。比如,针对手机设备,使用一个特定的样式,将页面原有的文字导航元素变为更易操作的图标形式。下面的一 些文章资源可作参考阅读:

Mobile Web Design Trends For 2009

7 Usability Guidelines for Websites on Mobile Devices

触屏与鼠标

触屏设备已经成为主流。虽然目前多数触屏设备还是小屏幕类型的产品,比如手机,但是市场上越来越多的大屏幕设备也开始使用触屏技术;且不说iPad一类的平板电脑,就连一些笔记本和台式机也加入了这一行列。比如HP Touchsmart tm2t,即使用传统的键鼠设备,同时也加入了触屏技术。

图片 10

相比于传统的基于鼠标指针的互动,触屏技术显然带来了截然不同的交互方式与相应的设计规范;两者又有各自所适用的领域。 所幸,要使我们的设计方案同时满足这两类设备的规范,并非一件难事,只是有些地方需要注意。比如,触屏设备无法反映CSS定义的hover行为及相应的样 式,因为它没有鼠标指针的概 念,手指点击就是click行为。所以不要让任何功能依赖于对hover状态的触发。

有兴趣的话,可以读读这篇Designing for Touchscreen, 这里提到的很多建议即有利于改进针对触屏设备的设计方式,同时也不会削弱传统键鼠设备上的用户体验。比如,放在页面右侧的导航列表可以对触屏设备的用户更 加友好。因为多数人习惯用右手点击操作,而左手负责握住设备;这样,放在右侧的导航列表即方便右手的点击,又可以避免被握着设备的左手不小心触碰到。而这 一点与键鼠设备用户的习惯完全不矛盾。

结论

这篇文章真是又臭又长,终于快完了。我们确实进入了web开发的新时代,随着科技进步我们还会继续优化我们的体验。今天我们设计的网站应该能够适应未来和现在,了解响应式web设计不需要太多的学习,他绝对比为每款设备提供设计方便的多。

响应式web设计并不是最好的,这只是个单纯的概念,它可以有效的提高用户体验但是却不能彻底解决。我们要面对不断出现的新设备出现,找出一个更好的解决方案,不断的改善用户体验。

响应式web设计可以提供一个比较满意的效果,他给广泛的应用设备提供了一个自定义的解决方案,无论是一个老式旧笔记本还是最先进的设备都能够获得比较好的体验,这才是作为网页设计师最想看到的,设计师眼中只有用户,用户感觉好自己就高兴,自己苦点累点又算什么呢?

本文由美高梅网址发布于美高梅游戏官网网站,转载请注明出处:布局方式,css3响应式布局介绍及设计流程

上一篇:没有了 下一篇:浏览器内核简介,十天精通CSS3
猜你喜欢
热门排行
精彩图文