响应式网页设计

分享于 

19分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

这一切都从回应网页设计开始,这是一篇文章,Ethan在一个列表中。 本文提出了通过创建灵活的流程和自适应网站来解决设备。浏览器。屏幕大小和方向的landscape。 使用一个特定的移动版本( 通常特定于单个移动设备),而不是针对最常见的屏幕分辨率的桌面网络版本做出响应,它的思想是: 使用灵活和流畅的布局,适应几乎任何屏幕。

核心概念

有三个关键的技术特征是响应式网页设计的核心:

  • 媒体查询和媒体查询侦听器
  • 灵活的基于 relative 大小调整的网格布局
  • 灵活的图像和媒体,通过动态调整大小或者 CSS

真正响应式的网页设计需要实现所有三个功能。

关键是适应用户和设备能力的需求。 假设移动用户将在小屏幕上查看你的站点。 考虑用户的需求并不只是指将内容调整到屏幕大小。 这也意味着在访问你的网站时,首先要考虑移动用户需要什么,然后相应地布置内容。 也许你会以不同的顺序展示这些信息。 不要假设用户不需要访问所有站点信息,因为她在移动设备上。 你可能需要更改字体或者交互区域以更好地响应触摸环境。 所有这些因素影响响应网页设计。

移动设备改变显示 landscape,随着越来越小的屏幕的外观,不要忘记光谱的另一端发生了什么。 显示器也越来越大。 不必为两个段服务,不应该阻止设计师在任何时候创新。

媒体查询

从 2.1开始,媒体类型用于在屏幕和打印中应用 CSS。 你可能还记得这些媒体类型:


1. <link rel="stylesheet" type="text/css" href="style.css" media="screen" />


2. <link rel="stylesheet" type="text/css" href="printfriendly.css" media="print" />



就是这样幸运的是,W3C改进了中的媒体查询,将它们向前移动了一大步。

今天,你可以使用媒体查询作为特定功能的范围样式,并根据 MATCH 查询的功能应用不同的样式。 你甚至可以使用诸如和不使用语义运算符来组合测试几个特性的查询。 特性包括宽度,高度,max-width,max-height,器件高度,方向,纵横比,分辨率和更多。

有三种实现媒体查询的方法:

使用 @import 规则从其他样式表导入样式规则:





1. @import


url(style600min.css) screen and (min-width: 600px);



将媒体查询直接放入样式表中,如图所示的 这是最常见的方法。

图 1在样式表中直接实现媒体查询




#nav


 {


 float: right;


 }


 #nav ul


 {


 list-style: none;


 }


 @media screen and (min-width: 400px) and (orientation: portrait)


 {


 #nav li


 {


 float: right;


 margin: 0 0 0. 5em;


 border:1px solid #000000;


 }


 }


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


 {


 #nav


 {


 width: 200px;


 }


 #nav li


 {


 float: left;


 margin: 0 0 0. 5em;


 border: none; 


 }


 }</



在工作表属性的链接样式媒体中包含查询:





1. <link rel="stylesheet" type="text/css" media="screen and


(max-device-width: 800px)" href="style800.css" />



由于CSS的( 层叠) 特性,默认样式是在顶部定义的,媒体查询匹配规则和样式 below 是在顶部定义的。 在顶部定义的样式将被级联到规则中匹配的样式,甚至完全覆盖。

下面的图片展示了一个使用媒体查询的响应式网页设计方法的例子。 图 2 图 3都显示了使用 IE 9的两种不同分辨率下的桌面。 图 4显示了 Windows Phone 上相同的响应站点,也有 IE 9.

图 2导航显示在左侧

在 800 x600调整窗口的图 3中,导航切换到顶部

图 4 Windows 电话上的相同站点

If 网站 enthusiast enthusiast enthusiast enthusiast enthusiast enthusiast enthusiast enthusiast enthusiast enthusiast enthusiast enthusiast enthusiast enthusiast网站的responsive。

图 5使用媒体查询的站点的Collection

媒体查询侦听器

更进一步地,在W3C中,to的CSS对象模型( CSSOM ) 工作组也创建了媒体查询侦听器,用于响应媒体查询。 不必轮询更改或者加载一个资源的几个版本,例如,在触发媒体查询 MATCH 时只下载特定大小的图像。

现在,Firefox 和 IE 10平台预览插件实现了媒体查询监听器;你可以在 IE 测试驱动器上看到演示"媒体查询&媒体查询侦听器"。

关于Viewport的文字

在移动浏览器上测试媒体查询时,你可能会注意到,正确的媒体查询并没有。 出现这种情况时,移动浏览器为你做一些工作,以便在较小的屏幕上优化页面。

那么你认为没有办法得到真实的分辨率? 实际上,在viewport元标记。 视窗元标记控制浏览器窗口的移动( chrome )的逻辑尺寸和缩放。 将宽度设置为设备宽度可以解决这里问题:


<meta name="viewport" content="width=device-width">



其他viewport设置包括最大化缩放和初始缩放。

灵活的网格

灵活的基于网格的布局是响应设计的基础之一。 术语"网格"使用得相当自由,并不意味着需要实现任何可用的网格框架。 这里的意思是使用CSS定位和布局边距和间距,以及实现各种 Web布局类型,以一种全新的方式实现。 布局和文本大小通常以像素表示。 设计师喜欢像素,Photoshop喜欢像素。 但是一个像素可以是一个设备上的一个点和另一个点上的八个点。 那么,如果一切都是基于像素的,那么如何处理响应式网页设计? 你可能不喜欢答案: 停止使用基于像素的布局,并开始使用百分比或者 em 来调整大小。

根据在百分比或者在em上的文本大小。宽度和边距,可以根据字体大小单位将固定大小转换为相对大小。 这意味着你需要做一些数学来实现灵活的网格和文本大小系统。 但是计算 em的公式很简单:





target ÷ context = result



我们假设 body 字体大小的普通上下文是 16像素。 如果设计器指定H1应为 24像素,则可以计算以下内容:


24 ÷ 16 = 1.5



这将导致以下CSS样式:


h1{


 font-size: 1.5em;


 }


}</



始终考虑上下文。 继续前面的示例,如果有一个元素 inside 需要为 12像素,则使用当前的ipqos作为上下文。 上下文现在为 24像素,因此"h1"的上下文计算为:


12 ÷ 24 = 0.5



CSS样式是:





h1 a{


 font-size: 0.5em;


 }</



你也可以使用百分比。 计算算法是一样的,你最终会得到百分比。

灵活的网格使用这种方法。 你可以找到几个框架来帮助你构建网格,例如流体网格系统( ) 或者流体 960网格系统( )。 此外,W3C中的几个小组已经提交了新的规范,以获得更好的灵活网格,有一些有用的结果。

CSS3网格布局

ibm的CSS3网格布局( 也称为网格对齐,也就是网格) 将典型的网格系统引入 CSS,类似于XAML或者Silverlight开发人员可能熟悉的一种典型。 写完这篇文章时,规范是一个草稿。它允许在布局中定义区域,包括列和行。跨行。间隔。间隔。网格模板等等,强制在HTML元素与CSS之间执行完全分离。 HTML表格不同,网格允许将HTML原语放置到与实际内容不同的网格区域中。

将CSS3网格与媒体查询结合起来,为构建流体。响应性应用程序。

网格的工作原理? 首先将显示 block 设置为'网格'。 ( 你需要使用CSS供应商前缀,因为这还不是一个CSS3建议。 现在,只有 IE 10平台预览支持规范,因这里你将看到这里使用的CSS供应商前缀 -ms-。 媒体查询用于根据屏幕宽度应用不同的网格样式。

第一个示例中,定义内容的HTML由一个 header 和三个不同的文本( 请参见图 6 ) 组成。

图 6为网格定义内容

1. <div id="mygrid">


2. <header id="myheader">


3. <h1>Hello world</h1>


4. </header>


5. <div id="block1">


6. <h2>Lorem Ipsum section 1</h2>


7. <p>


8. Phasellus venenatis sem vel velit tincidunt tincidunt.


9. Curabitur gravida, ante sit amet [..... .]


10. </p>


11. </div>


12. <div id="block2">


13. <h2>Lorem Ipsum section 2</h2>


14. <p>


15. Nam tempus justo eu massa ultrices eget imperdiet ligula placerat.


16. Suspendisse [..... .].


17. </p>


18. </div>


19. <div id="block3">


20. <h2>Lorem Ipsum section 3</h2>


21. <ul>


22. <li>Curabitur ultrices tristique purus, sed pellentesque


23. magna scelerisque ut.</li>


24. <li>[..... .] </li>


25. </ul>


26. </div>


27. </div>



你首先将内容块放在相互之间,以便内容适合智能手机( 请参见图 7 )。 如图8 所示,你可以添加 background 颜色以使你更清楚地使用网格项。

图 7.布局内容块




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


 #mygrid {


 display: -ms-grid;


 margin: 3px;


 -ms-grid-columns: 100%; /*one column taking full width */


 -ms-grid-rows: 70px auto auto auto; /*4 rows */


 }


 #myheader {


 -ms-grid-row: 1;


 -ms-grid-column: 1;


 }


 #block1 {


 -ms-grid-row: 2; /*place into row 2/column 1*/


 -ms-grid-column: 1;


 }


 #block2 {


 -ms-grid-row: 3;


 -ms-grid-column: 1;


 }


 #block3 {


 -ms-grid-row: 4;


 -ms-grid-column: 1;


 }


}



图 8带 background 颜色的内容块

在第二个示例中,媒体查询应用的样式为屏幕大小 GREATER 比典型智能手机宽 481像素。 你可以使用网格定义两个列,并将这些块移动到所需的位置( 请参见图 9 )。 结果显示在图 10

图 9为大屏幕定义一个新的布局

@media only screen and (min-width : 481px) {


/*make two columns and move block 3 next to 1 - just because we can*/


 #mygrid {


 display: -ms-grid;


 -ms-grid-columns: 10px 1fr 10px 1fr 10px; /*10px columns to spacing in between*/


 -ms-grid-rows: 100px 1fr 1fr; /*100px row and two rows each taking 1 fraction


 of available space*/


 margin: 5px;


 }


 #myheader {


 -ms-grid-row: 1;


 -ms-grid-column: 1;


 -ms-grid-column-span: 5;


 background-color: #EEB215;


 }


 #block1 {


 -ms-grid-row: 2;


 -ms-grid-column: 2;


 background-color: #B2B0B0;


 }


 #block2 {


 -ms-grid-row: 3;


 -ms-grid-column: 2;


 background-color: #726E6E;


 }


 #block3 {


 -ms-grid-row: 2; /*block 3 can go into row 2*/


 -ms-grid-column: 4;


 background-color: #515050;


 }


}



图 10.带有两个相邻列的新布局

第三个网格采样显示在屏幕宽度 GREATER 大于 1220像素。 使用跨多个列( 跨多列) 定义网格,然后定义三列,每个列占用一个可用空间的一个部分,在之间有几个 10-pixel 列。 结果显示在图 12

图 11为更宽的屏幕定义布局




@media only screen and (min-width: 1220px) {


 #mygrid {


 display: -ms-grid;


 -ms-grid-columns: 1fr 10px 1fr 10px 1fr;


 -ms-grid-rows: 100px 1fr;


 margin: 5px;


 }


 #myheader {


 -ms-grid-row: 1;


 -ms-grid-column: 1;


 -ms-grid-column-span: 5;


 background-color: #EEB215;


 }


 #block1 {


 -ms-grid-row: 2;


 -ms-grid-column: 1;


 background-color: #B2B0B0;


 }


 #block2 {


 -ms-grid-row: 2;


 -ms-grid-column: 3;


 background-color: #726E6E;


 }


 #block3 {


 -ms-grid-row: 2;


 -ms-grid-column: 5;


 background-color: #515050;


 }


}



图 12带有扩展头的3 个Side-by-Side列

网格规范是实现响应式网页设计的受欢迎补充。

另外还有两个新的CSS规范值得提及: Flexible Layout Layout MODULE ( Flexbox ) multi Layout Layout。 这都显示了设计响应式网站的巨大承诺。

Flexbox是W3C的一份工作草案,它增加了对四种新布局模式的支持: block,inline,table 和定位。 它允许你用 relative 位置和常量大小来布局复杂的页面,即使屏幕大小改变。

multi布局 MODULE 目前是W3C的候选推荐。 这个解决方案是用于你需要在列中放置的内容,并且从一列流到下一列。 你可以在这个实验室中查看多个列布局的交互式示例。

灵活的图像和媒体

响应式网页设计的final 方面是灵活的图像和媒体。 基本上,这个特性允许你调整图像或者它的他媒体,以便根据设备加载或者使用 CSS overflow 属性。

CSS中的缩放对于图像和视频来说是非常简单的。 你可以将元素 max-width 设置为 100 %,并且浏览器将根据它的容器使图像收缩和扩展。 你应该以尽可能的质量和大小提供图像,然后让CSS将图像调整到合适的大小。





img, object {


 max-width: 100%;


}



缩放图像的另一种方法是用CSS来裁剪图像。 例如应用 overflow:hidden 可以动态裁剪图像,以便在容器调整容器大小以适应新的屏幕环境时,它们可以放入容器中。

在CSS中缩放和裁剪图像有几个选项可能不够。 你真的需要占用所有的访问者带宽,因为你没有一个更小版本的图像? 为了更好地服务用户,灵活的图像可能意味着使用替代图像甚至根本没有图像。 在网页设计社区中,人们提出基于JavaScript和 Cookies的解决方案,你可以期望更多的响应,作为响应式网页设计,并成为许多质量网站的基础。

旧版浏览器

不支持媒体查询的旧浏览器怎么办? 8版本之前 IE 如何,它有缩放图像的问题? 以polyfills的形式解决的解决方案可以帮助。 下面是一些有用的例子。

关闭

在响应式网页设计车上跳跃不是什么容易的事。 考虑到你需要实现什么,并考虑用于桌面或者移动设备的特定版本是否有意义。

响应式网页设计处于它的早期阶段。 Web设计师将继续提供不同的观点,建议是否首先建立手机,如何将这些决策分成所有的屏幕。 随着越来越多的屏幕尺寸和形式因素的到来,对话将会继续。

HTML和CSS标准不断发展,帮助网页设计师处理这些问题。 很明显,一些形式的响应性Web设计将被用来满足这些挑战,同样,标准也会发展。

以下是一些附加资源:


WEB  DES  设计  
相关文章