响应式网页设计基础知识

响应式网页设计基础知识日期：2015.06.021.综述 12.设置视口 13.调整内容大小，使其适合视口 34.将CSS媒体查询用于响应式设计 44.1.根据视口大小应用媒体查询 54.2.min-device-width注意事项 64.3.使用相对单位 65.如何选择断点 75.1.以从小屏幕开始、不断扩展的方式选择主要断点 75.2.必要时选择小断点 95.3.优化文本，提高可读性 5.4.绝不能完全隐藏内容 响应式设计技术文档之——响应式网页设计基础知识使用移动设备上网的用户数量激增，遗憾的是，很多网页并未针对移动设备进行优化。移动设备通常会受到显示屏大小限制，因此需要通过不同的方式将内容呈现在屏幕上。手机、“超大屏智能手机”、平板电脑、桌面设备、游戏机、电视和穿戴式设备的屏幕尺寸各异。屏幕尺寸将会不断变化，因此您的网站应能够适应当今或未来的所有屏幕尺寸，这一点很重要。(此图为gif格式，在附件中)响应式网页设计(这一概念最初是由EthanMarcotte在’AListApart’中提出的)回应了用户及其所用设备的需求。版式会因根据设备的大小和功能而变化。例如，手机可能会以单列视图的形式呈现内容，而同样的内容可能会以双列的形式呈现在平板电脑上。2.设置视口对于针对各种设备优化过的网页，其文档标头中必须包含元视口元素。元视口代码会指示浏览器如何对网页尺寸和缩放比例进行控制。■使用元视口代码控制浏览器视口的宽度和缩放比例。■添加width=device-width以便与屏幕宽度(以设备无关像素为单位)进行匹配。■添加initial-scale=1以便将CSS像素与设备无关，像素的比例设为响应式设计技术文档之——你的首个多设备站点■确保在不停用用户缩放功能的情况下，您的网页也可以访问。为了提供最佳体验，移动浏览器会以桌面设备的屏幕宽度(通常大约为980像素，但不同设备可能会有所不同)来呈现网页，然后再增加字体大小并将内容调整为适合屏幕的大小，从而改善内容的呈现效果。对用户来说，这就意味着，字体大小可能会不一致，他们必须点按两次或张合手指进行缩放，才能查看内容并与之互动。<metaname="viewport"content="width=device-width,initial-scale=1.0">使用元视口值width=device-width指示网页与屏幕宽度(以设备无关像素为单位)进行匹配。这样一来，网页便可以重排内容，使之适合不同的屏幕大小(从较小的手机到较大的桌面设备显示器，种类繁多)。有些浏览器会在旋转到横向模式时保持固定的网页宽度，然后通过缩放(而不是重排)填满屏幕。添加属性initial-scale=1会指示浏览器在不考虑设备方向的情况下，指示浏览器将CSS像素与设备无关，像素的比例设为1:1,并响应式设计技术文档之——你的首个多设备站点允许网页完全占用横向宽度。使用英文逗号分隔属性，确保旧版浏览器可以准确解析相关属性。确保视口可以访问除了设置initial-scale外，您还可以在视口上设置以下属性：但是，设置后，这些属性可以停用用户缩放视口的功能，可能会造成网页访3.调整内容大小，使其适合视口无论在桌面设备上还是在移动设备上，用户都习惯上下滚动网站，而不是横向滚动，因此，如果用户必须横向滚动或缩小页面才能查看整个网页，那么这将给用户带来糟糕的体验。■请勿使用较大的固定宽度元素■在任何视口宽度下，内容均应正常显示■使用CSS媒体查询为不同尺寸的屏幕应用不同样式使用metaviewport代码开发移动版网站时，开发者很容易在无意间创建出不太适合指定视口的网页内容。例如，如果图片宽度大于视口宽度，那么就会导致视口横向滚动。您应该调整此内容，使其适合视口内的宽度，以便用户无需横向滚动。由于不同设备(例如手机和平板电脑，甚至不同手机之间)的屏幕尺寸和宽度(以CSS像素为单位)差别很大，因此内容不应只在特定视口下正常显示。为网页元素设置较大的CSS绝对宽度(如下例所示)会导致div因过宽而不适合窄视口设备(例如，iPhone等宽度为320CSS像素的设备)。因此，请改为使用相对宽度值，例如width:100%。同样请注意，使用较大的绝对定位值可能会使元素脱离小屏幕上的视口。响应式设计技术文档之——你的首个多设备站点C使用绝对宽度使用相对宽度4.将CSS媒体查询用于响应式设计媒体查询是可应用于CSS样式的简单过滤器。有了这些过滤器，我们可以根据设备呈现内容的特点轻松更改样式，包括显示屏类型、宽度、高度、方向甚至是分辨率。■媒体查询可用于根据设备特点应用样式。■优先使用min-width(而非min-device-width),以确保实现最宽阔的视觉体验。■为元素使用相对尺寸，以免破坏版式完整性。例如，您可以将打印必需的所有样式放在打印媒体查询中：除了在样式表链接中使用media属性之外，我们还可以通过另外两种方法响应式设计技术文档之——你的首个多设备站点我们建议开发者优先考虑使用前两种方法，尽量避免使用@import语法(请参阅避免CSS导入)。}不同媒体查询适用的逻辑并不是互斥的，因此，开发者可以根据CSS中优先级的标准规则，应用满足生成的CSS区块标准的任何过滤器。4.1.根据视口大小应用媒体查询通过媒体查询，我们可以打造响应式体验，使特定样式可应用于小屏幕、大屏幕和介于两者之间的屏幕。通过媒体查询语法，我们可以创建可根据设备特点}尽管我们可以查询多个不同的项目，但响应式网页设计最常使用的项目为：结果当任意浏览器宽度小于查询中定义的值时适用的规当任意浏览器高度大于查询中定义的值时适用的规当任意浏览器高度小于查询中定义的值时适用的规则高度大于或等于宽度的任意浏览器适用的规则。宽度大于高度的任意浏览器适用的规则。我们通过一个示例了解一下：<linkrel="stylesheet"media="(orientation:portra@media(min-width:500px响应式设计技术文档之——你的首个多设备站点}■当浏览器宽度介于0像素和640像素之间时，系统将会应用■当浏览器宽度介于500像素和600像素之间时，系统将会应用■当浏览器宽度为640像素或大于此值时，系统将会应用■当浏览器宽度大于高度时，系统将会应用landscape.css。■当浏览器高度大于宽度时，系统将会应用portrait.css。尽管开发者也可以根据*-device-width创建查询，但是我们强烈建议不要这么做。这两种代码的差别虽然不明显但却十分重要：min-width以浏览器窗口尺寸为依据，而min-device-width却是以屏幕尺寸为依据。很遗憾，有些浏览器(包括旧版Android浏览器)可能无法正确报告设备宽度，反而会以预期的视口宽度报告屏幕尺寸(以设备像素为单位)。此外，使用*-device-width会阻止内容适应允许窗口调整大小的桌面设备或其他设备，因为该查询基于设备的实际大小，而非浏览器窗口大小。与固定宽度的版式相比，响应式设计的主要概念基础是流畅性和比例可调节性。使用相对衡量单位有助于简化版式，并防止无意间创建对视口来说过大的组例如，在顶级div上设置width:100%可以确保其横跨视口的宽度，对视口来说既不会太大也不会太小。无论设备是宽度为320像素的iPhone、宽度为342像素的BlackberryZ10,还是宽度为360像素的Nexus5,div均会适合响应式设计技术文档之——你的首个多设备站点这些屏幕。此外，使用相对单位可让浏览器根据用户缩放程度呈现内容，而无需为网页添加横向滚动条。NoYeswidth:320px;wid)5.如何选择断点尽管根据设备类定义断点的方法可能很有用，但请慎用这种方法。如果根据具体设备、产品、品牌名称或现今正在使用的操作系统定义断点，后期维护起来可能会困难重重。相反，内容本身应该确定版式调整方式，使其适合自己的容器。特别提醒■根据内容创建断点，绝对不要根据具体设备、产品或品牌来创建。■从针对最小的移动设备进行设计入手，然后随着屏幕类型不断增加而逐渐改善体验。■使每行的文字最多为70或80个字符左右。5.1.以从小屏幕开始、不断扩展的方式选择主要断点先针对小屏幕尺寸进行内容设计，然后扩展至不同尺寸的屏幕，直到必须添加断点为止。如此一来，您便可以根据内容优化断点，并使断点数量降至最低。我们来分析一下在开头部分看到的示例天气预报。首先使天气预报在较小的屏幕上呈现效果良好。响应式设计技术文档之——你的首个多设备站点接下来，调整浏览器大小，直到元素之间的空间过大，天气预报根本无法正常显示为止。具体应调整到多大是由自己主观决定的，但超过600像素肯定就过宽了。响应式设计技术文档之——你的首个多设备站点要在600像素处插入断点，请新建两个样式表，一个在浏览器不超过600像素时使用，另一个在超过600像素时使用。最后，重新设计CSS。在本例中，我们已将常用的样式(例如字体、图标、基本定位和颜色)放入weather.css。然后，针对小屏幕的特定版式会放入weather-small.css,而大屏幕样式则放入weather-large.css(具体效果会在附5.2.必要时选择小断点除了选择主要断点使版式发生重大变化外，做出适当调整产生微小变化的做法也很有用。例如，进行以下调整可能会很有用：在主要断点之间调整某个元素的边距或内边距，或增加字体大小使其在版式中看起来更自然。首先优化小屏幕版式。在本例中，当视口宽度超过360像素时，我们来增加字体大小。接下来，当有足够的空间时，我们可以将高温和低温分隔开，使其在同一行中显示，而不是以上下排列的形式显示。然后，我们来调大天气图标。body{}}响应式设计技术文档之——你的首个多设备站点同样，如果是大屏幕，我们最好限制天气预报面板的宽度，使其不会占用整个屏幕宽度。L}传统的可读性理论建议：理想栏目的每一行应该包含70到80个字符(大约8到10个英文单词),因此，每次文本块宽度超过10个单词时，就应考虑添加断点。staakfonechonkaumrtisspolleinballtipshotibakMismpchcasn响应式设计技术文档之——你的首个多设备站点mtankbaftengscespotfantstakeaappgecatsddensfealh"* fraWfaterandoalegporkkeoppfkpansetta.Jontangaefietmianangrsy.Beseolapodkietbesahamhocktalcowshortrtssltonkesinfa