精华内容
下载资源
问答
  • 响应式网页设计

    千次阅读 2019-05-24 15:49:36
    什么是响应式网页设计响应式网页设计使您的网页在所有设备上都很好看。 响应式网页设计仅使用HTML和CSS。 响应式网页设计不是程序或JavaScript。 为所有用户设计最佳体验 可以使用许多不同的设备查看网页:...

    一、介绍

    什么是响应式网页设计?

    • 响应式网页设计使您的网页在所有设备上都很好看。
    • 响应式网页设计仅使用HTML和CSS。
    • 响应式网页设计不是程序或JavaScript。

    为所有用户设计最佳体验
    可以使用许多不同的设备查看网页:台式机,平板电脑和手机。无论设备如何,您的网页都应该看起来不错,并且易于使用。
    网页不应该遗漏信息以适应较小的设备,而是调整其内容以适应任何设备:

    桌面


    桌面

    平板


    平板

    手机


    手机

    当您使用CSS和HTML调整大小,隐藏,缩小,放大或移动内容以使其在任何屏幕上看起来都很好时,它被称为响应式网页设计。

    二、视窗

    什么是视窗?
    视窗是用户在网页上的可见区域。 视窗因设备而异,并且在手机上比在计算机屏幕上小。 在平板电脑和移动电话之前,网页仅针对计算机屏幕设计,并且网页通常具有静态设计和固定大小。 然后,当我们开始使用平板电脑和手机上网时,固定大小的网页太大而无法适应视窗。为了解决这个问题,这些设备上的浏览器按比例缩小整个网页以适应屏幕。 这不完美!!只是快速修复。

    设置视窗
    HTML5引入了一种方法,让网页设计师通过<meta>标签控制视窗。 您应该在所有网页中包含以下<meta>viewport元素:

    1
    2
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta>
    

    viewport元素为浏览器提供有关如何控制页面尺寸和缩放的说明。 width = device-width部分将页面宽度设置为遵循设备的屏幕宽度(具体取决于设备)。 initial-scale = 1.0部分设置浏览器首次加载页面时的初始缩放级别。 以下是没有视窗元标记的网页示例,以及具有视窗元标记的同一网页:

    没有视窗元标记


    没有视窗元标记

    有视窗元标记


    有视窗元标记

    视窗大小内容

    用户用于在桌面和移动设备上垂直滚动网站 - 但不是水平滚动! 因此,如果用户被迫水平滚动或缩小,以查看整个网页,则会导致糟糕的用户体验。 一些额外的规则要遵循:

    • 不要使用大的固定宽度元素 - 例如,如果图像的宽度比视窗宽,则可能导致视口水平滚动。请记住调整此内容以适合视窗的宽度。
    • 不要让内容依赖于特定的视口宽度来渲染 - 由于CSS像素中的屏幕尺寸和宽度在不同设备之间变化很大,因此内容不应依赖于特定的视口宽度来渲染。
    • 使用CSS媒体查询为小屏幕和大屏幕应用不同的样式 - 为页面元素设置大的绝对CSS宽度将导致元素对于较小设备上的视口而言太宽。相反,请考虑使用相对宽度值,例如宽度:100%。另外,请注意使用大的绝对定位值。它可能导致元素落在小型设备上的视口之外。

    三、网格视图

    什么是网格视图?

    许多网页都基于网格视图,这意味着页面分为以下几列:
    网格视图
    在设计网页时,使用网格视图非常有用。它可以更轻松地在页面上放置元素。
    网格视图
    响应式网格视图通常有12列,总宽度为100%,并在调整浏览器窗口大小时缩小和展开。

    构建响应式网格视图
    让我们开始构建响应式网格视图。 首先确保所有HTML元素都将box-sizing属性设置为border-box。这可确保填充和边框包含在元素的总宽度和高度中。
    在CSS中添加以下代码:

    1
    2
    3
    
    * {
        box-sizing: border-box;
    }
    

    以下示例显示了一个简单的响应式网页,其中包含两列:

    1
    2
    3
    4
    5
    6
    7
    8
    
    .menu {
        width: 25%;
        float: left;
    }
    .main {
        width: 75%;
        float: left;
    }
    

    如果网页只包含两列,则上面的示例很好。 但是,我们希望使用具有12列的响应式网格视图,以便更好地控制网页。 首先,我们必须计算一列的百分比:100%/ 12列= 8.33%。

    然后我们为12列中的每一列创建一个类,class =“col-”和一个定义该段应该跨越多少列的数字:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    

    所有这些列应该浮动到左侧,并且填充为15px:

    1
    2
    3
    4
    5
    
    [class*="col-"] {
        float: left;
        padding: 15px;
        border: 1px solid red;
    }
    

    每行应包含在<div>中。行内的列数应始终加起来为12:

    1
    2
    3
    4
    
    <div class="row">
      <div class="col-3">...</div>
      <div class="col-9">...</div>
    </div>
    

    行内的列全部浮动到左侧,因此从页面流中取出,其他元素将被放置,就好像列不存在一样。为了防止这种情况,我们将添加一个清除流程的样式:

    1
    2
    3
    4
    5
    
    .row::after {
        content: "";
        clear: both;
        display: block;
    }
    

    我们还想添加一些样式和颜色以使其看起来更好:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    
    html {
        font-family: "Lucida Sans", sans-serif;
    }
    .header {
        background-color: #9933cc;
        color: #ffffff;
        padding: 15px;
    }
    .menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .menu li {
        padding: 8px;
        margin-bottom: 7px;
        background-color :#33b5e5;
        color: #ffffff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    .menu li:hover {
        background-color: #0099cc;
    }
    

    请注意,当您将浏览器窗口调整为非常小的宽度时,示例中的网页看起来不太好。在下一章中,您将学习如何解决这个问题。

    ** 四、媒体查询

    什么是媒体查询?

    媒体查询是CSS3中引入的CSS技术。 仅当某个条件为真时,它才使用@media规则包含一个CSS属性块。
    如果浏览器窗口小于500px,背景颜色将变为浅蓝色:

    1
    2
    3
    4
    5
    
    @media only screen and (max-width: 500px) {
        body {
            background-color: lightblue;
        }
    }
    

    添加断点
    在本教程的前面,我们创建了一个包含行和列的网页,它具有响应性,但在小屏幕上看起来不太好。
    媒体查询可以提供帮助。我们可以添加一个断点,其中设计的某些部分在断点的每一侧都会表现不同。

    桌面


    桌面

    手机


    手机
    使用媒体查询在768px处添加断点:
    当屏幕(浏览器窗口)小于768px时,每列的宽度应为100%:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    
    @media only screen and (max-width: 768px) {
        /* For mobile phones: */
        [class*="col-"] {
            width: 100%;
        }
    }
    

    始终为移动优先设计
    移动优先意味着在为桌面设备或任何其他设备进行设计之前设计移动设备(这将使页面在较小的设备上显示得更快)。 这意味着我们必须在CSS中进行一些更改。 当宽度小于768px时,我们应该在宽度大于768px时更改设计,而不是更改样式。这将使我们的设计移动优先:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
    @media only screen and (min-width: 768px) {
        /* For desktop: */
        .col-1 {width: 8.33%;}
        .col-2 {width: 16.66%;}
        .col-3 {width: 25%;}
        .col-4 {width: 33.33%;}
        .col-5 {width: 41.66%;}
        .col-6 {width: 50%;}
        .col-7 {width: 58.33%;}
        .col-8 {width: 66.66%;}
        .col-9 {width: 75%;}
        .col-10 {width: 83.33%;}
        .col-11 {width: 91.66%;}
        .col-12 {width: 100%;}
    }
    

    另一个断点

    您可以根据需要添加任意数量的断点。 我们还将在平板电脑和手机之间插入一个断点。

    桌面


    桌面

    平板


    平板

    手机


    手机
    我们通过添加一个媒体查询(600px)和一组大于600px(但小于768px)的设备的新类来完成此操作:
    请注意,这两组类几乎相同,唯一的区别是名称(col-col-m-):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
    @media only screen and (min-width: 600px) {
        /* For tablets: */
        .col-m-1 {width: 8.33%;}
        .col-m-2 {width: 16.66%;}
        .col-m-3 {width: 25%;}
        .col-m-4 {width: 33.33%;}
        .col-m-5 {width: 41.66%;}
        .col-m-6 {width: 50%;}
        .col-m-7 {width: 58.33%;}
        .col-m-8 {width: 66.66%;}
        .col-m-9 {width: 75%;}
        .col-m-10 {width: 83.33%;}
        .col-m-11 {width: 91.66%;}
        .col-m-12 {width: 100%;}
    }
    @media only screen and (min-width: 768px) {
        /* For desktop: */
        .col-1 {width: 8.33%;}
        .col-2 {width: 16.66%;}
        .col-3 {width: 25%;}
        .col-4 {width: 33.33%;}
        .col-5 {width: 41.66%;}
        .col-6 {width: 50%;}
        .col-7 {width: 58.33%;}
        .col-8 {width: 66.66%;}
        .col-9 {width: 75%;}
        .col-10 {width: 83.33%;}
        .col-11 {width: 91.66%;}
        .col-12 {width: 100%;}
    }
    

    我们有两组完全相同的类似乎很奇怪,但它给了我们HTML的机会,决定每个断点处的列会发生什么:
    对于桌面: 第一部分和第三部分将分别跨越3列。中间部分将跨越6列。 对于平板电脑 第一部分将跨越3列,第二部分将跨越9列,第三部分将显示在前两部分下方,它将跨越12列:

    1
    2
    3
    4
    5
    
    <div class="row">
    <div class="col-3 col-m-3">...</div>
    <div class="col-6 col-m-9">...</div>
    <div class="col-3 col-m-12">...</div>
    </div>
    

    方向:纵向/横向

    媒体查询还可用于根据浏览器的方向更改页面的布局。 您可以拥有一组仅在浏览器窗口宽度超过其高度时应用的CSS属性,即所谓的“横向”方向:
    如果方向处于横向模式,则网页将具有浅蓝色背景:

    1
    2
    3
    4
    5
    
    @media only screen and (orientation: landscape) {
        body {
            background-color: lightblue;
        }
    }
    

    五、图片

    不同设备的不同图像
    大型图像在大型计算机屏幕上可以是完美的,但在小型设备上却无用。为什么在必须缩小尺寸时加载大图像?要减少负载或出于任何其他原因,您可以使用媒体查询在不同设备上显示不同的图像。 这是一个大图像和一个较小的图像,将显示在不同的设备上:

    花

    花

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    /* For width smaller than 400px: */
    body {
        background-image: url('img_smallflower.jpg');
    }
    
    /* For width 400px and larger: */
    @media only screen and (min-width: 400px) {
        body {
            background-image: url('img_flowers.jpg');
        }
    }
    

    您可以使用媒体查询min-device-width而不是min-width来检查设备宽度,而不是浏览器宽度。然后,在调整浏览器窗口大小时图像不会更改:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    /* For devices smaller than 400px: */
    body {
        background-image: url('img_smallflower.jpg');
    }
    
    /* For devices 400px and larger: */
    @media only screen and (min-device-width: 400px) {
        body { 
            background-image: url('img_flowers.jpg');
        }
    }
    

    HTML5<picture>元素

    HTML5引入了<picture>元素,可以让您定义多个图像。
    浏览器支持
    浏览器支持
    <picture>元素的工作方式类似于<video><audio>元素。您设置了不同的源,第一个符合首选项的源是正在使用的源:

    1
    2
    3
    4
    5
    
    <picture>
      <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
      <source srcset="img_flowers.jpg">
      <img src="img_flowers.jpg" alt="Flowers">
    </picture>
    

    srcset属性是必需的,它定义了图像的来源。 media属性是可选的,并接受您在CSS @media规则中找到的媒体查询。 您还应该为不支持<picture>元素的浏览器定义<img>元素。

    展开全文
  • 响应式网页设计优势:流体网格的网站适合响应式网页设计

    1、灵活性强,可以适应不同分辨率的设备

    2、方便快捷的解决多设备显示适应问题

    响应式网站可以自适应用户终端的尺寸,有利于移动端的用户体验,虽然响应式网站的图片会自适应压缩图片比例

    但图片容易变模糊而且由于原图过大会导致打开速度缓慢,消耗手机流量也大,那响应式网站怎么处理图片大小

    面中为云脑就来说说怎么解决响应式网站的图片问题?

    一、采用srcset属性,如下代码

    <img src="图片" alt="" srcset="1倍大图 600w 200h 1x, 2倍大图 600w 200h 2x, 小图 200w 200h">

    srcset里面是根据媒体查询条件显示不同图片,跟上面差不多一样,表达方式不一样,1x表示显示器像素密度显示倍数。

     

    二、采用picture元素,如下代码

    <picture alt="">

    <source src="大图路径" alt="" media="(min-width: 640px)">

    <source src="小图" alt="" media="(max-width: 639px)">

    <img src="图片" alt="" alt="">

    </picture>

    以上这两种方法都可以解决响应式图片的问题,响应式网站越来越受大家的喜欢,但也要多注意网站的用户体验,只有网站的所有元素都达到标准,才会真正的有利于用户体验,才是真正的让用户喜欢的响应式网站。

    展开全文
  • 但是这些设备又有着特定的屏幕尺寸、分辨率等,在这样的情况下,设计制作响应式的网页成为了客户的最佳选择,毕竟响应式网页具有流动性以及适应屏幕大小的能力,所以设计制作响应式网页便成了众多企业的最佳选择,...

    当今的网络时代,人们可以通过不同的设备进入网络中,但是这些设备又有着特定的屏幕尺寸、分辨率等,在这样的情况下,设计制作响应式的网页成为了客户的最佳选择,毕竟响应式网页具有流动性以及适应屏幕大小的能力,所以设计制作响应式网页便成了众多企业的最佳选择,那么H5响应式网页设计究竟具有哪些优势呢?

    23e1a215197e6d7e19217fb62d116c66.png

    H5响应式网页

    1、H5响应式网页设计的智能化;设计制作响应式网页,最大的优势是具有智能化的自适应性,这种网页可以针对用户设备显示端的尺寸不同,自动的调整网页的显示方式,让网页几乎可以适应所有的显示终端,而且还可以在浏览器中调整网页的宽度,让网页不出现滚动条,使得用户不管在任何一种显示器上浏览网页,都不会出现布局混乱、显示不全、或者是乱码的问题,从而最大程度的提高用户的网页体验。

    2、移动频段(Mobile Segment) 在响应式网页的帮助下,你可以获得网页流量的全景图。你需要做的只是创建一个移动频段(的流量统计),以获得与网页流量相关的所有必要信息。流量的状态在分析网页性能及采取必要措施提升性能方面十分有用。

    3、H5响应式网页也能节省成本;设计制作H5响应式的网页,可以让客户不用再针对不同的设备而制作pc版网页,或者是手机版网页,设计制作一个响应式的网页,花一份的钱,就能够获得两种网页的体验,最终实现一站多用的效果,从而达到节省网页设计制作成本。

    4、融入SEO的响应式网页;设计制作H5响应式的网页,为了客户网页的后续发展,一般都会在内容和代码编写上,都会按照SEO原理进行规划,让网页具有更好的SEO基础,这样响应式网页在上线以后,对搜索引擎会有更加亲和的表现。而响应式网页融入SEO以后,网页后期就可以免于二次优化,大大加快网页的收录,排名等。

    5、积累分享功能;响应式Web设计可以让你(作为网页的拥有者)通过单一的URL地址收集所有的社交分享链接。你可以为创建更好、更友好的网页而做出积极贡献。

    6、更少容易维护;开发一个独立的移动网页,会增加你的工作负担。实际上你就拥有了两个独立网页。如果你有一个H5响应式网页,维护的成本将会很小,因为它只有一个布局,且可工作在所有类型的设备上,而这可以明显地减少你的工作量。

    随着终端设备的不断增多,要为每个设备提供良好体验的难度也在不断的加大,H5响应式网页作为一项极端技术,可以让网页在所有的设备中有着不错的显示,因此,我们认为现在的每家企业都应该为自己设计制作一个H5响应式的网页。

    展开全文
  • 响应式网页设计 在先前的文章中,我讨论了为什么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的基础知识。 ...
  • 响应式网页设计指南

    2017-05-24 13:13:15
    响应式网页设计的概念最初是由Ethan Marcotte提出,从设计的角度引领我们思考:为什么一定要为每个用户分别做一套设计方案呢?是否可以有一种设计能够根据不同设备环境自动响应以及调整显示?特别是随着移动互联网...
  • 响应式网页设计学习笔记

    千次阅读 2013-05-06 12:27:19
    一、why 随着移动技术的迅速普及,越来越多的人通过不同设备来...图1-4可以充分说明响应式网页设计的必要性。 图1.当前流行的网页浏览设备 图2.网页运行于不同的操作系统 图3.当前主流的屏幕尺寸对比
  • 响应式网站设计概念响应式网站设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弾性...
  • 响应式网页设计入门

    2014-09-12 09:30:42
    响应式网页设计(Responsive Web Design)这个概念在2000年的时候就有人提出来了,其实我更喜欢将其翻译为自适应网页设计,阮一峰关于Responsive Web Design的一篇文章就是翻译为自适应网页设计,但是国内都采用了...
  • 如何让你的网站在其出现的任何设备和屏幕尺寸上能够完美的...这篇文章为大家提供了12个基础的响应式网页设计的教程,结尾还附上了个人最喜欢的3款响应式网页设计的工具, 轻松带你入门。 1. What is Responsive W...
  • 什么是响应式web设计 现在开发一个产品,基本上都会需要兼顾 PC端和 移动端。 一般有两种思路: 1.为每个终端做一个特定的版本,并给2级域名,根据终端环境调用不同的版本代码。 2.一个网站能够兼容多个终端 而响应...
  • 随着智能型手机及平板计算机的普及,越来越多用户使用它上网,近年来大家开始重视手机及平板上的网页视觉效果,不但设计类网站已经开始朝向响应式网页设计,企业官网、甚至政府部门网站,也开始改成响应式网页设计,...
  • @陈子木 响应式设计是由著名网页设计师Ethan Marcotte在2010年5月提出的设计概念,随后席卷前端和设计领域,成为了如今网页设计的大趋势。正如同Ethan所说:“响应式网站设计提供了一种全新的选择,这种基于栅格...
  • 响应式网页设计-responsive web design

    千次阅读 2014-01-24 09:32:39
    响应式网页设计是针对任意设备对网页内容进行完美布局的一种显示机制。响应式设计一般使用相对度量单位(em或百分比),一般首先针对小屏幕设备设计,再设计大屏幕设备。 为测试方便可以使用浏览器插件测试; ...
  • 响应式网页设计  响应式Web设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。 三步实现响应式网页   第一步:...
  • 固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸; 可切换的固定布局:同样以像素作为页面单位,参考主流设备尺寸设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度,选择...
  • 响应式Web设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布 局、图片...
  • 响应式网页设计的9项基本原则    响应式web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难。没有固定的页面尺寸、没有毫米或英寸,没有任何物理限制,让人感到无从下手...
  • 在过去的一年里,如果你不是住在深山里,就一定知道响应式网页设计,它已经成为当今的主流。响应式设计是Ethan Marcotte提出的,概念很简单:使网站的页面布局能够根据不同设备和分辨率进行自动调整。  当我第一次...
  • 初学者如何掌握响应式网页设计知道响应式设计与自适应设计反应灵敏适应性强使用相对单位将设计划分为断点引导响应断点了解最大值和最小值 我仍然在努力使网站具有响应能力。我知道初学者可以在网上冲浪(我之前已经...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,202
精华内容 5,680
关键字:

响应式网页设计尺寸