精华内容
下载资源
问答
  • 响应式网站设计概念响应式网站设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弾性...

    8229f78f7f88274d25b954f1bcf5323a.png

    一.响应式网站设计概念

    响应式网站设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以

    及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整

    具体的实践方式由多方面组成,包括弾性网格和布局、图片、CSS media quety的使用等。无

    论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚

    本功能等,对页面元素进行重新排版,甚至隐折叠,字体尺寸变化,版式调整等以适应不同设

    备的最佳浏览效果;

    1a4a828cb18e0919fe1d1361b662e27f.png
    网页的内容布局适配硬件屏幕尺寸

    二.响应式网站的宽度尺寸

    随着硬件设备的多元化,我们需要设计适应各个屏幕尺寸的页面。响应式网站的宽度没有固定

    的尺寸,按照不同的项目开发要求去定,一般是3〜5的宽度,用来适配台式机、笔记本、平板

    电脑的横屏竖屏,手机的横屏竖屏。建议尺寸为:宽度包括 480、600、840、960、1280、

    1440、1600、1920 像素。

    42ec62d24c4605ac739036c0e2dda3a3.png
    设备的尺寸的多元化

    beaf72adcafc4db5ce9e2a357bdc859c.png
    对应的设备网页建议尺寸

    9b765c6d49a185f6741c55f834e90e4c.png
    微软的主英的岫应式排版

    推荐一个响应式网页欣赏站,里面大概有几百个优秀的响应式网页案例:

    Media Queriesmediaqueri.es

    三.响应式线框图绘制

    一般来说,虽然比较优秀的响应式会画手机竖向,手机横向,PAD竖向,PAD横向,PC电脑5种

    宽度的线框。但是,基础一般是先画完手机和电脑2个版本,其他的在此基础上进行修改即

    可。

    1.响应式手绘线框

    dfc67f0698eb4bd9ed64350497d4de94.png

    2.响应式机绘线框

    1623518d8803e7d37e4ba478c6cd3431.png

    四.网页的栅格化设计

    1.为什么我们需要网格布局?

    在我们的Web内容中,可以将其分割成很多个内容块,而这些内容块都占据自己的区域

    (regions),可以将这些区域想像成是一个虚拟的网格。

    到目前为止,在一个棋板中使用不同的结构标签,使用多个浮动和手动计算实现一个布局。这

    对于Web前端人员来说,这是一件痛苦之事。

    而网格布局将让你摆脱这样的困局,让你的布局方法变得非常简单与清晰。

    柵格化设计特别适用于,由大量系统自动生成的页面,如门户站的新闻和视频站等。

    c9951f9522359812c1576b171cd7bc6e.png

    2.什么是 CSS Grid Layout?

    CSS Grid Layout是CSS为布局新増的一个模块。网格布局特性主要是针对于Web应用程序的

    开发者。可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空间,

    或者定义他们的大小、位置以及层级。

    就像表格一样,网格布局可以让Web设计师根据元素按列或行对齐排列,但他和表格不同,网

    格布局没有内容结构,从而使各种布局不可能与表格一样。

    例如,一个网格布局中的子元素都可以定位自己的位置,这样他们可以重疊和类似元素定位。

    所谓网格设计,就是把页面,按照等比,分成等分格子,然后所有元素按照最小单位的倍数尺

    寸来设计,以便于后期前端排版有规律,算定位好算,网页看起来规整,适合响应式多分辨率

    适配,适合大型动态网站布局,CSS更好写!

    7ac47ebe90d47f77df66b2060292da8b.png

    2be0dcd16ef16cf71b2f411bd4a85340.png

    五.现在流行的一页式布局

    所为一页式布局,就是TABLE单元格布局,而最近流行的布局是一页式滚动布局。也有TAB标

    签和一页式结合的页面布局。

    6e8372b7b96d9fcf78b716fe7756967b.png

    d4b9be864016ec08673cf3a56a7e5ac2.png
    展开全文
  • 响应式网页设计 在先前的文章中,我讨论了为什么Web准备就绪以进行响应式设计 ,以及网站所有者如何使用用户设备和屏幕空间的上下文来跨各种尺寸的屏幕(包括PC,电话) 为用户提供上下文相关的体验。和控制台。 ...

    响应式网页设计

    在先前的文章中,我讨论了为什么Web准备就绪以进行响应式设计 ,以及网站所有者如何使用用户设备和屏幕空间的上下文来跨各种尺寸的屏幕(包括PC,电话) 为用户提供上下文相关的体验。和控制台。

    在本文中,我将介绍一些用于构建响应式站点布局和体验的最常见的实践。 我将介绍新兴的和可用的网站布局技术,这些技术可以根据屏幕空间灵活地调整大小(称为“流体网格”),以确保用户在使用的任何屏幕尺寸上都能获得完整的体验。 此外,我将展示如何呈现富媒体,尤其是图像,以及开发人员如何确保小屏幕设备上的访问者不会为高质量媒体带来额外的带宽成本。

    当您使用我描述的某些技术时,可以通过以下几种方法来测试您的网站在不同设备分辨率下的外观:

    1. 本杰明·基恩(Benjamin Keen)具有响应性的Web设计书签 ,您可以将其添加到所选浏览器上的收藏夹栏(或书签栏)中。 您可以单击此书签,以不同的分辨率测试网站布局。
    2. 如果您使用的是Windows 8,则始终可以通过使用Windows 8捕捉模式在Internet Explorer 10上测试页面布局。 在Windows 8中,您可以在全屏(全屏模式)上使用Internet Explorer 10,也可以通过将浏览器停靠在快照模式下来执行多任务,在此模式下它可以模拟智能手机浏览器的布局特征。 此外,您可以将浏览器停靠在填充模式下,在默认Windows 8屏幕尺寸为1366 x 768 px的情况下,浏览器占据1024 x 768像素(px)。 对于您的网站在iPad屏幕以及传统的4:3屏幕上的外观来说,这是一个很好的代理。
    3. 最后,您可能会做很多在图1中看到的操作(图片由Reddit.com提供)。

    响应式Web设计的基本测试
    图1.响应式Web设计的基本测试

    媒体查询

    传统上,开发人员依靠嗅探浏览器的用户代理字符串来识别用户是从PC还是移动设备访问站点。 通常,这样做之后,他们会将用户重定向到提供几乎相同内容但布局和信息设计不同的不同子站点。 例如,过去,访问MSN.com的用户可以通过重定向到http://m.msn.com来查看传统的PC体验或获得特定于硬件的移动体验。

    但是重定向需要两个单独的工程工作。 此外,此方法针对两种屏幕布局 (移动宽度为320像素的移动设备和桌面宽度为1024像素的桌面)进行了优化。 对于从中等大小的设备(例如平板电脑)访问的用户以及屏幕明显更大的用户,它并不能智能地提供出色的体验。

    CSS3希望通过引入媒体查询来帮助Web开发人员将内容创建 (其页面标记以及HTML和JavaScript中的功能)与该内容的呈现分开,并完全在CSS中处理不同维度的布局。

    媒体查询是开发人员编写CSS3样式表并为所有UI元素声明样式的一种方式,这些条件取决于屏幕大小,媒体类型和屏幕的其他物理方面。 使用媒体查询,可以通过询问浏览器有关因素,例如设备宽度,设备像素密度和设备方向,为同一标记声明不同的样式。

    但是即使使用CSS3,也很容易陷入为相同的网页标记构建三种不同的固定宽度布局以针对当今常见的屏幕尺寸(台式机,平板电脑和手机)的陷阱。 但是,这并不是真正的响应式Web设计 ,并且不能为所有设备提供最佳体验。 媒体查询是提供真正响应的Web布局的解决方案的一部分 另一个是按比例缩放以填充可用屏幕的内容。 稍后再解决。

    “像素”又意味着什么?

    该像素已经用于Web设计和布局已有一段时间了,并且传统上是指用户屏幕上能够显示红蓝绿点的单个点。 基于像素的Web设计一直是进行Web布局的实际方法,用于声明Web页面各个元素的尺寸以及版式。 这主要是因为大多数站点在其标题,导航和其他页面UI元素中都使用了图像,并选择了具有固定像素宽度的站点布局,在这些布局中,它们的图像看起来很棒。

    但是,最近出现的高像素密度屏幕和视网膜显示器为该术语增加了另一层含义。 在当代Web设计中,像素(即我们刚刚讨论的硬件像素)不再是屏幕可以呈现的单个最小点。

    在iPhone4上访问一个网站,其640 x 960 px的硬件屏幕将告诉您的浏览器其320 x 480 px。 这可能是最好的,因为您不希望将640像素宽的文本列插入仅2英寸宽的屏幕。 但是iPhone屏幕和其他高密度设备强调的是我们不再为硬件像素开发。

    W3C将参考像素定义为在距读取器一臂之遥的密度为96 ppi的设备上1 px的视角。 除了复杂的定义,所有这些都意味着,当您为现代的高质量屏幕设计时,您的媒体查询将响应参考像素,也称为CSS像素 CSS像素的数量通常会少于硬件像素的数量,这是一件好事! (请注意:硬件像素是大多数设备制造商用来宣传其高质量手机,平板和视网膜显示器的广告,它们会使CSS误入歧途。)

    硬件像素与CSS 像素的比率称为设备像素比率 较高的设备像素比率仅意味着每个CSS像素都由更多的硬件像素渲染,这使您的文本和布局看起来更清晰。

    维基百科按像素密度列出了最近显示的大量列表,其中包括设备像素比率。 如果需要,您始终可以使用CSS3媒体查询来标识设备像素比率,因此:

    /*Note that the below property device pixel ratio might need to be vendor-prefixed for some browsers*/
    @media screen and (device-pixel-ratio: 1.5)
    {
    /*adjust your layout for 1.5 hardware pixels to each reference pixel*/
    }
    @media screen and (device-pixel-ratio: 2)
    {
    /*adjust your layout, font sizes etc. for 2 hardware pixels to each reference pixel*/
    }

    还有一些开放源代码库,使开发人员可以使用JavaScript在各种浏览器上计算设备像素比率,例如Tyson Matanich的 GetDevicePixelRatio 请注意,此结果仅在JavaScript中可用,但可用于优化图像下载,以使高质量的图像(文件较大)不会下载到非视网膜显示器上。

    但是, 不建议您使用设备像素比率来定义页面和内容布局。 尽管参考像素与硬件像素之间的差异可能令人困惑,但很容易理解为什么这对于为用户提供更好的体验至关重要。 iPhone 3GS和iPhone 4的物理屏幕尺寸大致相同,并且具有相同的使用模式,因此,有理由认为文本块的物理尺寸大致相同。

    同样,仅因为您的高清电视具有1920 x 1080 p的屏幕,这并不意味着网站应以此原始分辨率呈现内容。 用户坐在离电视几英尺远的地方,并且还使用不精确的输入机制(例如操纵杆)与之交互,因此电视浏览器最好将多个硬件像素打包为一个参考像素。 只要您为桌面浏览器设计的站点布局为960像素宽,无论您的电视是1080p还是720p的旧型号,该站点都将看起来可比并且可以使用。

    根据一般经验,这些设备上的文字内容会更好看。 但是,您的图像内容可能看起来像素化和模糊。 因此,从实际的角度来看,当您尝试在高像素密度的屏幕上向用户提供高质量的摄影/图像数据时,设备像素比率最为重要。 此外,您想确保您的用户喜欢的新手机上的品牌徽标看起来清晰。 在本文的后面,我将讨论实现响应图像的技术,并指向一些可以解决此问题的现有JavaScript库。

    免费学习PHP!

    全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。

    原价$ 11.95 您的完全免费

    继续进行操作时,我将使用“ 像素 ”一词来表示参考像素,并根据需要明确调用硬件像素。

    响应性地扩展您的网站布局

    基于网格的布局是网站设计的关键组成部分。 您访问的大多数站点都可以很容易地显示为页面组件的一系列矩形,例如标题,站点导航,内容,侧边栏,页脚等。

    理想情况下,在设计响应站点时,我们希望使网格布局与用户的屏幕尺寸无关 这意味着我们希望我们的布局和内容能够缩放到尽可能大的屏幕空间(在合理范围内),而不是提供两个或三个固定宽度的布局。

    移动优先设计

    正如我在本系列第一篇文章中指出的那样,全球Web流量的12%以上来自移动设备。 在智能手机普及率较高的国家,这一比例要高得多,随着亚洲,拉丁美洲和非洲的采用率回升,预计在未来几年中这一比例将显着增加。

    此外,采用移动优先的方法进行网站设计是信息设计中的一个很好的练习。 基本上,它可以帮助您确定要在网站的移动版本上提供的内容和功能的优先级,然后逐步增强大型设备的网站布局。 这样一来,您可以确保用户在移动设备上获得宝贵的体验,而不仅仅是桌面体验,这是您可以利用的。如果有的话,您还可以利用其他不动产来提供更具视觉吸引力的体验,并导航到其他“第二层”内容。

    案例研究:重新设计的Microsoft.com

    当您通过手机访问microsoft.com或缩小PC浏览器的宽度(屏幕宽度小于540像素)时,您会看到单个英雄图像是一次触摸友好,视觉丰富的幻灯片放映的一部分,该放映广告一次宣传一种产品。 (请参见图2。 )顶部的产品在“发现”部分中突出显示。 附加导航位于折叠下方或手风琴式菜单中,默认情况下该菜单处于折叠状态,当用户点击列表图标时会显示该菜单。 同样,默认情况下,搜索框是隐藏的,以节省屏幕空间,用户需要点击搜索图标。 这样,移动版式将顶级产品和链接显示在另一个产品之下,并且仅需要垂直平移。 折叠下方的内容和产品链接从上到下优先。

    Microsoft.com专为手机设计
    图2.专为手机设计的Microsoft.com

    一旦视口的宽度超过540 px(此时我们可以假定用户不再是在手机上而是在平板电脑或低分辨率PC上查看站点),您会注意到第一个布局更改( 图3 ) 。 默认情况下,搜索框现在是可见的,而顶级导航以前是隐藏在列表图标下的。 现在,“发现”部分中的产品以一行显示,因为它们适合可用宽度。 最重要的是,请注意,在此过渡中,英雄图像始终占据屏幕的可用宽度。

    Microsoft.com超过540像素后
    图3.超过540 px后的Microsoft.com

    如图4所示,下一个布局更改发生在640 px或更高的宽度上。 与往常一样,英雄图像会占据所有可用的屏幕宽度。 “工作”部分中的各个项目并排布置。 额外的空间还可以使英雄图像的标题与图像和动作保持一致,非常醒目。

    布局更改为640像素或更高
    图4. 640像素或更高像素处的布局更改

    最后的布局更改发生在900 px或更高的屏幕宽度上( 图5 )。 “发现”菜单浮动到左侧以利用可用的水平空间,从而减少了垂直滚动的需要。

    屏幕宽度为900像素或更高时的布局
    图5.屏幕宽度为900 px或更高时的布局

    最后,最重要的是,页面布局(尤其是英雄形象)将继续缩放并填充可用的水平空间 (直到1600 px),以最大程度地发挥视觉糖果的效果( 图6 )。 实际上,对于200像素到1600像素之间的所有屏幕宽度都是这种情况-英雄图像的侧面绝不会浪费任何空白。 (类似地,“发现”和“工作”部分的相对布局不会改变,但是图像也会成比例地缩放。)

    以更高的分辨率最大化影响力
    图6.以更高的分辨率最大化影响

    响应式布局技术

    太好了,那么我们如何实现这种体验? 通常,网站的自适应布局可归结为两种技术:

    • 确定需要更改布局的断点。
    • 在断点之间,按比例缩放内容。

    让我们独立地研究这些技术。

    在断点之间按比例缩放内容

    如对microsoft.com的评估所指出的,对于900 px或更高的屏幕宽度,首页上标头,英雄图像,导航区域和内容区域的相对布局不会更改。 这很有价值,因为当用户在1280 x 720的显示器上访问该网站时,他们看不到900像素宽的网站,其中超过25%的屏幕在左右边缘留有空白。

    同样,两个用户可能会访问该站点,一个用户使用480 x 320 px分辨率(以CSS像素为单位)的iPhone 4,另一个用户使用640 x 360 px分辨率的Samsung Galaxy S3。 对于宽度小于512像素的任何布局,microsoft.com都会按比例缩小布局,以便对于两个用户,整个移动浏览器都将致力于Web内容而不是空白,无论他们是以纵向还是横向模式查看网站。

    有两种方法可以实现这一点,包括CSS3流体网格建议 但是,主要浏览器尚不支持此功能。 您可以在Internet Explorer 10(带有供应商前缀)上看到此功能,并且MSDN 在此处此处都提供了CSS3网格实现的示例。

    同时,我们将使用基于百分比的宽度的久经考验的方法来实现流体网格布局。 考虑图7所示的简单示例,该示例具有以下设计要求:

    1. 跨屏幕宽度的#header。
    2. #mainContent div占屏幕宽度的60%。
    3. #sideContent div占屏幕宽度的40%。
    4. #mainContent和#sideContent之间的固定间距为20像素。
    5. #mainImage img元素占据#mainContent内部的所有可用宽度,但周围不包含固定的10像素装订线。

    设置流体网格
    图7.设置流体网格

    该页面的标记如下所示:

    <!doctype html>
    	<html>
    	<head>
    	  <title>Proportional Grid page</title>
    	  <style>
    	    body {
    	      /* Note the below properties for body are illustrative only.
    	         Not needed for responsiveness */
    	      font-size:40px;
    	      text-align: center;
    	      line-height: 100px;
    	      vertical-align: middle;
    	    }
    	    #header
    	    {
    	      /* Note the below properties for body are illustrative only.
    	         Not needed for responsiveness */
    	      height: 150px;
    	      border: solid 1px blue;
    	    }
    	    #mainContent {
    	      width: 60%;
    	      float: right;
    	      /*This way the mainContent div is always 60% of the width of its 
                  parent container, which in this case is the  tag that defaults to 
                  100% page width anyway */
    	      background: #999999;
    	      }
    	#imageContainer {
    	    margin:10px;
    	    width: auto;
    	    /*This forces there to always be a fixed margin of 10px around the 
                image */
    	}
    	#mainImage {
    	    width:100%;
    	    /* the image grows proportionally with #mainContent, but still 
                maintains 10px of gutter */
    	}
    	#sideContentWrapper {
    	    width: 40%;
    	    float: left;
    	}
    	#sideContent {
    	    margin-right: 20px;
    	    /* sideContent always keeps 20px of right margin, relative to its 
                parent container, namely #sideContentWrapper. Otherwise it grows 
                proportionally. */
    	    background: #cccccc;
    	    min-height: 200px;
    	    }
    	  </style>
    	</head>
    	<body>
    	  <div id="header">Header</div>
    	  <div id="mainContent">
    	    <div id="imageContainer">
    	      <img id="mainImage" src="microsoft_pc_1.png" />
    	    </div>
    	    Main Content
    	  </div>
    	  <div id="sideContentWrapper">
    	  <div id="sideContent">
    	    Side Content
    	  </div>
    	  </div>
    	</body>
    	</html>

    维基百科的页面采用了类似的技术。 您会注意到,文章的内容似乎总是适合可用的屏幕宽度。 最有趣的是,侧边栏(左侧导航栏以及带有HTML5标志的右侧列)具有固定的像素宽度,似乎“粘”在屏幕的相应侧面。 带有文本内容的中心区域会根据屏幕尺寸而增大和缩小。 图8图9显示了示例。 请注意,侧边栏保持固定的宽度,并且中心剩余文本内容的可用宽度按比例缩放。

    宽1920像素的显示器上的维基百科
    图8.宽1920像素的显示器上的维基百科

    800像素宽的显示器上的Wikipedia
    图9.宽800像素的显示器上的Wikipedia

    对于左侧具有固定导航菜单的站点,这种效果可以通过以下代码轻松实现:

    <!DOCTYPE html>
    	<html>
    	  <head><title>Fixed-width left navigation</title>
    	  <style type="text/css">
    	  body
    	  {
    	    /* Note the below properties for body are illustrative only.
    	       Not needed for responsiveness */
    	    font-size:40px;
    	    text-align: center;
    	    line-height: 198px;
    	    vertical-align: middle;
    	}
    	 #mainContent
    	 {
    	    margin-left: 200px;
    	    min-height: 200px;
    	    background: #cccccc;
    	}
    	#leftNavigation
    	{
    	    width: 180px;
    	    margin: 0 5px;
    	    float: left;
    	    border: solid 1px red;
    	    min-height: 198px;
    	}
    	</style>
    	</head>
    	<body>
    	<div id="leftNavigation">Navigation</div>
    	<div id="mainContent">SomeContent</div>
    	</body>
    	</html>

    根据断点更改页面布局

    比例缩放只是解决方案的一部分-因为我们不希望将电话和其他小屏幕设备的所有内容均等地缩放。 在这里,我们可以使用CSS3媒体查询来逐步增强我们的网站体验,并随着屏幕尺寸的增大而添加其他列。 同样,对于较小的屏幕宽度,我们可能会使用媒体查询来隐藏整个低优先级内容块。

    MediaQueri.es是浏览站点的绝佳资源,以了解站点在其断点处发生了哪些布局更改。 考虑图10所示的Simon Collision的示例。

    不同屏幕尺寸的Simon Collision
    图10.不同屏幕尺寸的Simon Collision

    我们可以使用CSS3媒体查询获得类似的体验。 让我们研究图11所示的简单示例,其中有四个div:#red,#green,#yellow和#blue。

    CSS媒体查询示例
    图11. CSS媒体查询示例

    这是示例代码:

    <!doctype html>
    	<html>
    	<head>
    	<title>Break points with media queries</title>
    	  <style type="text/css">
    	    /* default styling info*/
    	/* four columns of stacked one below the other in a phone layout */
    	/* remember to plan and style your sites mobile-first */
    	
    	#mainContent
    	{
    	  margin: 40px;
    	}
    	
    	#red, #yellow, #green, #blue
    	{
    	  height: 200px;
    	}
    	#red
    	{
    	  background: red;
    	}
    	#green
    	{
    	  background: green;
    	}
    	#yellow
    	{
    	  background: yellow;
    	}
    	#blue
    	{
    	  background: blue;
    	}
    	
    	@media screen and (max-width:800px) and (min-width:540px)
    	{
    	  /* this is the breakpoint where we transition from the first layout, of 
              four side-by-side columns, to the square layout with 2X2 grid */
    	
    	  #red, #blue, #green, #yellow {
    	    width:50%;
    	    display: inline-block;
    	  }
    	}
    	
    	@media screen and (min-width:800px)
    	{
    	  /*custom styling info for smartphones small screens;
    	    All columns are just displayed one below the other */
    	
    	  #red, #yellow, #green, #blue {
    	    width: 25%;
    	    display: inline-block;
    	    white-space: nowrap;
    	  }
    	
    	}
    	
    	  </style>
    	</head>
    	<body>
    	  <div id="mainContent">
    	    <div id="red"></div><div id="green"></div><div id="yellow"></div><div id="blue"></div>
    	  </div>
    	</body>
    	</html>

    通常,您不需要从头开始编写此类样式表。 毕竟,什么是Web开发而不利用现有的可用的开放源代码框架呢? 现有的网格布局框架,例如Gumby框架 (建立在Nathan Smith的经过验证的960gs之上)和Skeleton框架 ,已经提供了开箱即用的支持,可以根据可用屏幕对网格列数进行重新排序宽度。 另一个很好的起点,特别是对于Wikipedia风格的布局,是简单命名的CSS Grid 这为用户提供了标准的固定宽度的左侧导航栏,当屏幕分辨率转换为平板电脑和智能手机的分辨率时,该导航栏将消失,从而为您提供单列布局。

    更多媒体查询

    根据站点设计的需要,在做出CSS决定之前,可能需要有关设备/视口的其他数据。 媒体查询使您也可以在浏览器中轮询其他属性,例如:

    • 设备的宽度高度 这是一组有用的属性,不仅可以获取浏览器可用的宽度, 还可以获取设备的整体宽度, 从而可以深入了解设备的外形尺寸。
    • 设备的宽度方向 (纵向与横向)。
    • 浏览器宽高比设备宽高比

    其他定义在这里

    之前,我们分解了响应式布局的两个组件,以检查它们是如何实现的。 重要的是要记住,真正的响应式布局是设备不可知的-即未针对特定设备宽度进行优化-因此是两种技术的结合。

    图片和照片

    图像在Web上用于照片内容和样式(用于背景纹理,自定义边框以及阴影和图标)。 图像使Web变得美丽,我们当然希望我们的站点看起来丰富并吸引所有用户。 但是,围绕图像的最大担忧可以说与用户体验的最重要部分有关, 即性能和页面加载时间。

    图像的带宽影响

    我们的网站以HTML,CSS和JavaScript等文本形式提供。 通常,这些文件下载所需的时间不会超过50 KB。 图片和其他媒体通常是我们页面中最耗带宽的部分。 新闻站点首页上的所有图像最多可以添加几兆字节的内容,浏览器在渲染页面时必须下载这些内容。 此外,如果所有图像内容都来自单独的文件,则每个单独的图像文件请求都会导致额外的网络开销。 对于在3G网络上访问您的网站的人来说,这不是一个很好的体验,尤其是如果您希望提供精美的8兆像素全景风景背景。 此外,您的用户的320 x 480像素电话不会对这种高质量的图像内容产生影响。 因此,如何确保用户在手机上获得快速响应的体验,然后可以在大型设备上扩展到更丰富的媒体体验?

    请考虑以下技术,可以结合使用以下技术,以节省数百(甚至更多)字节的用户图像下载量,并提供更好的性能体验。

    可以用CSS替换图像吗?

    CSS3可以帮助Web开发人员避免在很多常见情况下完全使用图像。 过去,开发人员使用图像来实现简单的效果,例如带有自定义字体的文本,阴影,圆角,渐变背景等。

    大多数现代浏览器(Internet Explorer 10,Google Chrome,Mozilla Firefox和Safari)都支持以下CSS3功能,开发人员可以使用这些功能来减少用户访问网站时所需的图像下载数量。 同样,对于较旧的浏览器,许多这些技术会自然退化(例如,圆角边框只让位于Internet Explorer 8及更早版本上的正方形边框让步),这样,您的网站仍然可以在较旧的浏览器上正常工作并可以使用。

    • 使用@ font-face的自定义字体支持。 使用CSS3,您可以将自定义字体上载到您的网站(只要您拥有这样做的许可证),然后在样式表中指向它们即可。 您不需要创建图像来捕获页面标题和标题,也不需要为影响力的标题和标题嵌入自定义字体
    • 背景渐变。 转到许多热门网站,您会注意到该网站的背景通常是渐变颜色,这有助于页面显得不太“平坦”。 可以通过CSS3轻松实现, 如此处所示
    • 圆角。 CSS3允许您为HTML元素的四个角中的每个声明性地指定边框半径 ,而不必依赖于那些令人讨厌的20 x 20 px的圆圈图像来在您的网站设计上创建一个圆形框。
    • 2D转换。 CSS3允许您声明2-D转换,例如translate(),rotate(),skew()等,以更改标记的外观。 IETestDrive 在这里有一个很好的工作示例 常见的转换(例如旋转)可能会减少图像下载的数量。
    • 框阴影和文本阴影。 现代浏览器支持box-shadowtext-shadow ,它们使站点开发人员可以使内容看起来更立体,并在重要的内容(例如标题文本,图像,浮动菜单等)中突出显示

    其中一些属性除了标准实现外,可能还需要特定于浏览器的实现(使用供应商前缀)。 HTML5Please是一种方便的资源,用于标识是否需要为CSS3使用其他供应商前缀。

    现在,为了公平起见,使用旧版浏览器访问您的网站的用户将看到功能实用但美学程度较低的网站内容。 但是,这里要权衡一下,以确保通过最先进的移动设备和3G互联网访问您的站点的人数不断增加,从而获得快速,响应Swift的站点体验。

    使用JavaScript为正确的上下文下载正确的图像大小

    如果您的站点体验固有地依赖于图片,则您需要一种可在各种设备和网络条件范围内扩展的解决方案,以便为用户提供使用他们所使用设备时的引人入胜的体验。 这意味着在高品质的电影院显示器上,您想让观众惊叹于高品质(即大文件大小)的图像。 同时,您不希望在具有计量3G数据连接的4英寸手机屏幕上向用户展示1600 x 1200 px的照片。

    当W3C正在研究如何为给定图片声明不同图像源的建议时,一些新兴JavaScript技术可以帮助您立即开始使用。

    媒体查询监听器

    现代浏览器支持媒体查询监听器。 他们让开发人员使用JavaScript来验证是否满足某些媒体查询条件,并相应地决定下载哪些资源。

    例如,假设您的网页上有某人张贴的照片。 作为开发人员,您需要做两件事:

    • 确定用于显示高质量(大屏幕体验)或小屏幕体验的阈值(或断点),然后根据该决定,下载高质量的资源集或低带宽的资源集。 在加载时包括以下脚本,以确保您的页面下载适当的资产集并为用户提供正确的体验:
    var mediaQueryList = window.matchMedia("(min-width:480px)");
    	//NOTE: for IE10 you will have to use .msMatchMedia, the vendor-prefixed implementation
    	 //instead
    	isRegularScreen = mediaQueryList.matches;
    	//this returns a Boolean which you can use to evaluate whether to use high-quality assets or
    	//low-bandwidth assets
    	
    	if (isRegularScreen)
    	{
    	  //run script to download the high-quality images
    	}
    	else
    	{
    	  //the condition has failed, and user is on smartphone or snap-mode
    	  //run script to download low-bandwidth images
    	}
    • (可选)添加事件侦听器,以监视媒体大小的更改,以便在用户调整其浏览器窗口的大小时,您可以运行不同的脚本集以根据需要获取高质量的资源。 例如,用户可能首先在Windows 8上以320像素宽度的快照模式访问您的站点。 稍后,用户可能会发现您的内容有趣,并以全模式打开浏览器(甚至共享她在HDTV上看到的内容。)此时,您可能希望为媒体提供更好的体验:
    mediaQueryList.addListener(mediaSizeChange);
    	function mediaSizeChange(mediaQueryList)
    	{
    	  //Executed whenever the media query changes from true to false or vice versa
    	  if(mediaQueryList.matches)
    	  {
    	    //run script to acquire high-quality assets;
    	  }
    	else{
    	  //in this case the user has gone from a large screen to small screen
    	  //by resizing their browser down
    	  //if the high-quality images are already downloaded
    	  //we could treat this as a no-op and just use the existing high-quality assets
    	
    	  //alternatively, if the smaller image shows a clipped version of the high-quality image
    	  //trigger the download of low-bandwidth images
    	
    	  }
    	}

    定制JS库

    当然,也可以使用自定义库来帮助您。 这些库以类似的方式工作,方法是识别用户设备的大小和分辨率,然后通过网络即时交付按比例缩小版本的源映像。 这里有些例子:

    • Filament Group重新设计了Boston Globe网站以使其具有响应能力, 此处提供了一项可用的技术,该技术要求您向站点添加一些JavaScript文件并更改站点的.htaccess文件。 然后,为每个<img>标签提供一个常规大小的版本以及一个高分辨率版本,其余部分由它们的插件来处理。
    <img src="smallRes.jpg" data-fullsrc="largeRes.jpg">
    • AdaptiveImages.com上提供了类似的技术。 此技术的好处在于,它不需要开发人员手动编码其标记以指向低分辨率和高分辨率图像,也不需要开发人员手动上传同一图像的两个不同版本。

    泰森·马塔尼奇(Tyson Matanich)已公开提供Polyfill代码库 ,这是microsoft.com在前面详细介绍的自适应重新设计中使用的技术。 泰森还在他的博客文章中阐明了Polyfill库中可用功能的背后原理。 泰森和他的团队为Polyfill代码库所做的一些优化包括以下内容(即使在Internet Explorer 6上也可以在浏览器中使用):

    1. 允许开发人员指定在DOM准备就绪之前应加载哪些图像(页面内容必须具有图像)。
    2. 允许开发人员指定仅在页面其余部分就绪后才加载哪些图像(例如,幻灯片中的图像仅在10秒后切换)。
    3. 允许开发人员决定在调整浏览器大小时是否应下载并交换新图像。

    该博客文章详细介绍了Polyfill API中已向开发人员公开的所有优化。

    文本

    网站使用文本以两种主要方式将组织和内容传达给用户,即正文和标头文本。 仔细考虑您的网站将如何在不同上下文中扩展这些资源绝对有价值。

    如果您的网站上有用户消费的文章,博客文章和大量书面内容,则正文尤其有趣。 您的移动用户希望在其台式机,电视和320像素宽的屏幕上阅读相同的500字文章,并且作为站点开发人员,您希望兼顾可读性和便利性(即不必滚动太多)。 可以放大文章的宽度以匹配屏幕尺寸,但除此之外,您可以提供更大的字体和更佳的行距,从而进一步提高屏幕更大用户的可读性。

    当每行包含大约66个字符时,文本块通常是最易读的,因此,如果您的站点确实依赖于长篇文章的可读性,则响应式优化用户的类型可以真正改善他们的整体体验。

    以下示例使用CSS3媒体查询max-width逐步增加段落文本的可读性:

    /* pack content more tightly on mobile screens to reduce scrolling in really long articles */
    	p {
    	  font-size:0.6em;
    	  line-height: 1em;
    	  letter-spacing: -0.05em;
    	}
    	
    	@media screen and (max-width:800px) and (min-width:400px)
    	{
    	  /* intermediate text density on tablet devices */
    	  p
    	  {
    	    font-size:0.8em;
    	    line-height: 1.2em;
    	    letter-spacing: 0;
    	  }
    	}
    	
    	@media screen and (min-width:800px)
    	{
    	  /* text can be spaced out a little better on a larger screen */
    	  p
    	  {
    	    font:1em 'Verdana', 'Arial', sans-serif;
    	    line-height: 1.5em;
    	    letter-spacing:0.05em;
    	  }
    	}

    AListApart.com与响应缩放类型的文章的一个很好的例子在这里

    此外,您的网站可能使用标题来拆分内容,从而使正在您的网站页面中浏览的用户更容易快速识别信息和功能的结构。 网站通常使用影响较大的标题,并增加边距和填充。

    HTML的标头(特别是<h1>,<h2>和类似的标记)通常会自动设置样式,不仅使用大字体大小属性,而且还会设置宽敞的页边距和内边距以确保它们脱颖而出并中断内容流。

    使用类似的技术,您可以考虑缩小用于标题的文本大小,边距,填充和其他间距属性,具体取决于可用设备的不动产。 您也可以使用可用的开源解决方案(例如FitText )来实现此目的。

    优化表单字段

    如果您的网站要求用户填写表单,则可能需要确保可以最大程度地减少触摸用户的交互。 如果您有很多文本输入,则这尤其重要。

    HTML5扩展了<input>标记的type属性,以使开发人员可以向文本框添加语义。 例如,如果用户正在填写联系表,则可以将输入的电话号码标记为<input type =“ tel” />,将电子邮件地址字段标记为<input type =“ email” /> 。

    现代浏览器(尤其是触摸设备上的浏览器)将解析此属性,并相应地优化触摸屏键盘的布局。 例如,当用户点击电话号码字段时,浏览器的触摸键盘将突出显示小键盘,而当用户点击电子邮件地址字段时,触摸键盘将显示@键以及.com键尽量减少打字。 这是一个很小的调整,可以真正改善您通过触摸屏手机和平板电脑访问的用户在网站上填写表格的整体体验。

    结语

    在本文中,我介绍了用于处理响应式设计的最常见方案的策略,例如处理网格布局,带宽敏感的图像缩放以及文本和表单字段的优化。 值得注意的是,Web开发社区仍在评估技术,以解决响应式设计领域中新出现的挑战。 例如,W3CHTML工作组正在评估竞争性提案(即srcset属性提案图片元素提案 ),以处理图像选择和下载以用于高质量显示器(例如,显示相同参考的视网膜显示器笔记本电脑)像素尺寸作为其前身,但使用更高的硬件像素数)。

    尽管如此,此处描述的技术仍应可在所有现代浏览器上使用,并允许您确保访问您网站的用户都拥有出色的体验,无论他们来自哪种设备。 如今,消费者对于智能手机,平板电脑,个人电脑和游戏机有多种购买选择,并且硬件格局也在不断变化和发展。 您希望确保自己的网站已准备好在2013年及以后处理来自热门新设备的流量。


    本文是Internet Explorer团队HTML5技术系列的一部分。 Try-out the concepts in this article with 3 months of free BrowserStack cross-browser testing @ http://modern.IE .

    Originally published at: http://msdn.microsoft.com/en-us/magazine/dn217862.aspx . Re-published with permission.

    翻译自: https://www.sitepoint.com/common-techniques-in-responsive-web-design/

    响应式网页设计

    展开全文
  • 响应式网页设计-源码

    2021-02-13 15:04:15
    响应式网页设计 在此响应式Web设计认证中,您将学习开发人员用于构建网页的语言:用于内容HTML(超文本标记语言)和用于设计CSS(级联样式表)。 首先,您将构建一个猫照片应用程序以学习HTML和CSS的基础知识。 ...
  • 响应式网页设计

    2016-07-13 13:31:03
    响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难。没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手。为了desktop和mobile单独使用像素设计的方法也成为了过去...

    响应式布局就是根据屏幕大小自动布局。通俗得讲是:css根据屏幕宽度,自动调整网页div显示和布局,以适应不同尺寸屏幕优化浏览体验。


    响应式网页设计9要素

    响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难。没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手。为了desktop和mobile单独使用像素设计的方法也成为了过去,因为越来越多的设备都可以打开网站。因此,我们需要弄清楚响应式网页设计的一些基本原则,接受流体网页,而不是与之相抗。

    1.响应式 vs 自适应网页设计

    它们看起来似乎是相同的,但事实并非如此。这两种方法相辅相成,并没有说哪个是正确的那个是错误的,内容决定一切。


    2.内容流动

    随着屏幕尺寸变小,内容将会占据更多的垂直空间,而下方的内容就会被接着往下推,这就是所谓的流动。如果你是使用像素和磅来进行设计的,这可能会有点棘手,但是当你习惯了之后,就会变得很有意义了。


    3.相对单位

    画布大小可以是desktop、mobile或是它们之间的任何尺寸。像素密度也可以有所不同,所以我们需要灵活的、在各种屏幕上都可以使用的单位。这就是相对单位(如百分比)派上用场的时候了。所以设置50%的宽度也就意味着它会占据屏幕(或视图,即打开的浏览器窗口的尺寸)的一半。


    4.断点

    断点允许布局在预定义的点改变。例如:desktop屏幕上有3列,但是在mobile上只有一列。大多数CSS属性可以根据断点改变。通常你会根据具体的内容来设置断点。如果一个句子超过了屏幕长度,你可能就需要为其添加一个断点。但是使用断点是需要谨慎——当它很难理解什么内容会影响什么内容的时候,它可能会迅速地导致混乱。


    5.最大值和最小值

    有时候,如果内容占据了屏幕的整个宽度是很好的,比如在移动设备上。但是如果是在电视屏幕上,相同的内容,占据了你的屏幕整个的宽度,通常就意义不大了。这就是Min/Max值发挥作用的时候了。比如说,设置width为100%,然后max-width是1000px,那么内容会填满屏幕,但是不会超过1000px。


    6.嵌套对象

    还记得相对位置吗?让很多元素的位置依赖于其它元素来定位是很难控制好的,因此使用容器来包裹元素可以让它更易理解,也更整洁。这就是静态单位(比如像素)发挥作用的时候了。对于你不想要模块化的内容(比如logo或按钮),它们是有用的。


    7.Mobile优先 还是Desktop优先

    从技术上讲,如果一个项目是从一个较小的屏幕开始,变成较大的屏幕(mobile优先),还是反过来(desktop优先),并没有太大的差别。然 而它还是增加了额外的限制,可以帮助你决定是否从mobile优先开始。通常大家在一开始的时候都会两端一起写,所以,还是看看哪个运行起来更好。


    8.网页字体 vs 系统字体

    希望你的网站上有很酷的Futura或Didot字体吗?可以使用网页字体!虽然它们看起来非常棒,但是记住字体放得越多,你加载页面的时间也会越长。在另一方面,加载系统字体确是快如闪电,但当用户本地没有这套字体时,它就会返回默认的字体。



    9.位图 vs 矢量图

    你是否想过在图标上添加很多的细节和花哨的效果?如果想过的话,使用位图比较合适。如果没有,可以考虑使用矢量图。对于位图,使用的是jpg、png或gif格 式的图像,而对于矢量图,最好的选择是SVG或图标字体。每个都有对应的优势和缺点。但是图片的大小也需要重视——网页上的图片必须经过优化。另一个方 面,矢量图通常比较小,但是一些旧版的浏览器不支持。此外,如果它有很多曲线的话,它也可能会比位图要重。所以,慎重选择。


    作者:袁帅
    链接:http://www.zhihu.com/question/20976405/answer/57018545
    来源:知乎
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • 响应式网页设计是当前网页设计的主流形式,响应式主要是指网页在页面加载显示及客户端设备、浏览器窗口尺寸改变时,自动改变网页布局及内容显示模式使之更加符合是被尺寸要求,实现页面的完美显示。响应式网页设计所...

    响应式网页设计是当前网页设计的主流形式,响应式主要是指网页在页面加载显示及客户端设备、浏览器窗口尺寸改变时,自动改变网页布局及内容显示模式使之更加符合是被尺寸要求,实现页面的完美显示。响应式网页设计所遵循的第一条设计原则为:移动优先的设计原则 。框架技术应用是响应式网页设计商业化应用开发的首选,本文主要对部分国内外主流响应式网页开发框架进行说明。

    152b330edbf64c05b670e43c54f112f9.png

    响应式网页设计


    1、BootStrap框架技术

    BootStrap是响应式网页设计首选框架技术,也是目前世界范围内应用最为广泛的前端响应式网页架构技术。BootStrap是由Twitter开发人员于2011年创建并发布,主要包括CSS、HTML和JavaScript组件。该框架遵循网页设计标准,适应于各类型响应式网站的开发。

    eef5fad9c789089f32d08245919d9486.png

    BootStrap

    2、Bulma CSS框架技术

    Bulma框架技术也是目前较为流程的前端响应式框架技术之一,目前已经有超过150,000开发人员使用Bulma框架技术进行响应式网页的设计与开发。Bulma是基于Flexbox的开源、免费CSS架构。Bulma作为一个简单,优雅,现代轻量化的CSS框架深受网站开发人员喜爱。

    406233ea567de6a2fe298e6c84072a02.png

    Bulma CSS框架技术

    3、UIKIT框架技术

    UIkit是一个轻量级前端模块化响应式架构框架,也是当前比较流行的前端框架之一,用于实现快速响应式网页开发。UIkit主要包括LESS和Sass CSS预处理器。UIKit拥有一系列具有一致命名约定的灵活响应组件,可以组合30多个可扩展的模块化组件,以实现更多功能。

    8154b8b1e42104bc0bfd04da880c4461.png

    UIkit响应式式框架技术

    4、Foundation框架技术

    Foundation是Zurb公司开发的非常先进的企业级前端开发框架,具有较高的开发灵活性、符合网页响应式开发要求。通过使用Foundation框架前端开发人员可以快速设计、开发各类响应式网站。

    6f54d397c7abbb3d48f2814225c80628.png

    Foundation框架

    5、Skeleton开发工具包

    Skeleton本身不是完整大的前端UI框架,它只是一个前端开发的工具包,通过为用户提供基本的样式,允许用户开发符合各类尺寸的响应式网站。Skeleton开发工具包支持用户设计及样式开发。

    96c737de0bd36111fcafecd594b01181.png

    Skeleton开发工具包


    本头条号长期关注于青少年编程资讯分享;编程课程、素材、代码分享及青少年编程培训。如果您对以上方面有兴趣,可关注该头条号,如有编程学习问题可以联系作者,共同探讨。

    展开全文
  • 响应式网页设计  响应式Web设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。 三步实现响应式网页   第一步:...
  • 响应式Web设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布 局、图片...
  • Responsive Web Design 响应式网页设计1、常见的布局方案固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸;可切换的固定布局:同样以像素作为页面单位,参考主流设备尺寸,设计几套...
  • 在建站网站时,你需要先对网页设计尺寸有所了解。不同浏览器、不同终端设备的流行尺寸也不一样,就pc端网页设计尺寸而言,目前比较常见的分辨率是1920*1080,1366*768。根据百度流量研究院的数据显示,2019年10月份...
  • 响应式网页设计学习笔记

    千次阅读 2013-05-06 12:27:19
    一、why 随着移动技术的迅速普及,越来越多的人通过不同设备来...图1-4可以充分说明响应式网页设计的必要性。 图1.当前流行的网页浏览设备 图2.网页运行于不同的操作系统 图3.当前主流的屏幕尺寸对比
  • 2010年,国外的Ethan Marcotte提出了"响应式网页设计"(Responsive Web Design)这个名词,指的是可以自动适应不同屏幕的长宽比,总动做出调整的网页设计。这意味着新的网络管理方式出现,也意味着网站具有更多展示的...
  • Responsive Web Design,翻译为自适应网页设计或响应式网页设计。 今天,智能手机和平板电脑等移动设备的普及程度令人难以置信,智能手机都白菜价了,几百块钱就能入手一部功能强劲的Android手机。人们通过这些移动...
  • 这篇文章为大家提供了12个基础的响应式网页设计的教程,结尾还附上了个人最喜欢的3款响应式网页设计的工具, 轻松带你入门。 What is Responsive Web Design? https://smallbiztrends.com/2013/05/what-is-resp
  • 如果您不熟悉响应式Web设计,则媒体查询是第一个要学习的最重要的CSS功能。媒体查询使您可以根据当前设备尺寸来设置元素的样式。现在流行的CSS策略是首先编写移动样式,然后在其上构建更复杂的桌面版网页样式。 媒体...
  • 但是这些设备又有着特定的屏幕尺寸、分辨率等,在这样的情况下,设计制作响应式的网页成为了客户的最佳选择,毕竟响应式网页具有流动性以及适应屏幕大小的能力,所以设计制作响应式网页便成了众多企业的最佳选择,...
  • 响应式网页设计的9项基本原则    响应式web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难。没有固定的页面尺寸、没有毫米或英寸,没有任何物理限制,让人感到无从下手...
  • 响应式网页设计,是一种正在流行的网页开发思想,它是利用灵活可变的栅格系统,令网页的显示模式可以根据访问设备的屏幕尺寸规格而进行自适应。预计2015年的时候,移动端的用户数量将会从目前的8亿,增长到19亿,而...
  • 响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难。没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手。为了desktop和mobile单独使用像素设计的方法也成为了过去...
  • 如何让你的网站在其出现的任何设备和屏幕尺寸上能够完美的...这篇文章为大家提供了12个基础的响应式网页设计的教程,结尾还附上了个人最喜欢的3款响应式网页设计的工具, 轻松带你入门。 1. What is Responsive W...
  • 响应式网页设计基础

    2016-03-27 21:29:00
    无论是手机的小屏幕或桌面显示器,页面将会根据不同的屏幕尺寸重新对内容进行排版。 些浏览器在用户旋转为横向浏览的时候仅仅是保持页面宽度不变并缩放网页内容而不是对屏幕内容进行重新排版。加入属性initial-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 520
精华内容 208
关键字:

响应式网页设计尺寸