总是听别人说响应式布局,原来这么简单-利来国际登录

总听别人说响应式布局,觉得是一个很高大上的东西,近日做的一个项目需要适配不同的屏幕尺寸,于是就简单研究了一下 web响应式布局,其实原理很简单,下面就简单整理了一下分享给大家。

什么是响应式布局



如图就是响应式布局的体现,简单的说响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。这个概念随着移动设备的兴起而深入人心。 比如 头条他做的就不是响应式布局,他通过实时检测设备信息,在 www.toutiao.comm.toutiao.com两个网站之间切换。而最近比较火的开发者社区 segmentfault.com就是响应式布局,页面的布局会会随着你拖动浏览器窗口大小变化而变化。响应式布局没有绝对的话好与坏,需要根据网站的性质来确定,比如 toutiao的页面元素非常多,页面需要包括所有屏幕尺寸的样式显示不是很好操作,然而 segmentfault页面元素较少,反而放在一起方便维护。

如何快速实现 web响应式布局

我们通过一个例子来具体说明,首先使用 @media关键字为不同的屏幕尺寸设置不同样式,关于 @media我们下文有更详细的介绍

代码片段:

  1. type="text/css">

  2.  @media only screen and(min-width:480px){

  3.  .col-sm-6,.col-sm-12{

  4.    float: left;

  5.  }

  6.  .col-sm-12{

  7.    width:100%;

  8.  }

  9.  .col-sm-6{

  10.    width:50%;

  11.  }

  12. }

  13. @media only screen and(min-width:768px){

  14.  .col-md-6,.col-md-12{

  15.    float: left;

  16.  }

  17.  .col-md-12{

  18.    width:100%;

  19.  }

  20.  .col-md-6{

  21.    width:50%;

  22.  }

  23. }

  24. class="container">

  25.  class="col-md-12 col-sm-12 row">

  26.      class="col-md-6 col-sm-12 col-1 col">

  27.          lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

  28.          tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,

  29.          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

  30.          consequat. duis aute irure dolor in reprehenderit in voluptate velit esse

  31.          cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non

  32.          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  33.      

  •      class="col-md-6 col-sm-12 col-2 col">

  •          lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

  •          tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,

  •          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

  •          consequat. duis aute irure dolor in reprehenderit in voluptate velit esse

  •          cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non

  •          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  •      

  •  

  •    
  • 我们简单解释一下上述代码片段 min-width指的是当屏幕尺寸大于当前值的时候样式生效。 外层的 div包裹内层的两个 divcol-md-6col-sm-12当屏幕尺寸大于 768px的时候子 div宽度是父 div的一半,所以是并排。当屏幕尺寸大于 480px的时候子 div宽度和父 div的宽度一样。下图为不同尺寸下的效果图。

    768px



    注意观察的同学又发现问题了,图二没有办法看啊,太小了吧。是的,我们的响应式还没有做完,这个时候我们在 head里面添加如下一行代码再试试?那么问题来了,图一尺寸大于 768px不假,但是也大于 480px啊,那么怎么就按照 768px的尺寸排布了呢?这里就涉及到了 css优先级css 的基本优先级如下 (外部样式)externalstyle sheet<(内部样式)internalstyle sheet<(内联样式)inlinestyle如果优先级一样便有一个覆盖原则,后面的覆盖前面的,于是如例,当屏幕尺寸慢慢变大到 768px的时候,后者遍生效了。

    1. name="viewport"

    2.  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    如图神奇的一幕出现了:



    width=device-width: 表示此宽度不依赖于原始象素(px),而依赖于屏幕的宽度.这样我们就大功告成了.如需要下载源码请点击,在线查看请点击。想知道为什么 meta有这么大作用请翻看下文。

    meta viewport 是什么

    手机浏览器是把页面放在一个虚拟的“窗口”( viewport)中,通常这个虚拟的“窗口”( viewport)比屏幕宽,默认是把网页挤到一个很小窗口以便全部预览,这样也不会破坏没有适配手机布局的网页。移动版的 safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也逐步支持。我们如果做了手机屏幕尺寸的适配就可以手动调整 viewport,这样就可以把网页内容和手机布局合理的展示给用户。下面是具体参数的说明:



    width设置layout viewport 的宽度,为一个正整数,或字符串”width-device”
    initial-scale设置页面的初始缩放值,为一个数字,可以带小数
    minimum-scale允许用户的最小缩放值,为一个数字,可以带小数
    maximum-scale允许用户的最大缩放值,为一个数字,可以带小数
    height设置layout viewport 的高度,这个属性对我们并不重要,很少使用”
    user-scalable是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许

    media queries 详解

    中文叫做媒体查询,它包含一个媒体类型(media type)和至少一个表达式,用媒体特性限制样式表的作用范围。下面我们直接通过例子对相对的关键字进行分析:

    only

    用于向早期浏览器隐藏媒体查询,比如ie如果不支持的话直接忽略当前定义的样式。和其他表达式一起用需要 and

    @mediaonly screenand(min-width:400px)

    screen

    screen是一种 媒体类型,例中的 screen意思是仅支持彩色电脑显示器。其他属性如下: all:适用与所有设备 print:paged material and documents viewed on screen in print previe mode. screen: 彩色电脑显示器 speech:intended for speech synthesizers

    and

    and是一种 操作符,表示被链接的表达式不许同时满足,其他表达式如下: and:所有条件必须满足 ,:只要满足一种条件即可 not:条件的取反

    min-width

    min-width媒体特征,他的意思是最小宽度满足的时候就为真,其他媒体特征:



    返回观点列表
    本文标签:

    相关专题

    • 品牌利来手机网址官网设计

      杭州派迪科技为高端客户提供品牌利来手机网址官网咨询策划,品牌利来手机网址官网设计,品牌利来手机网址官网建设开发服务,以国际化视野和标准为基础,为各行业领军品牌提供高端企业网站定制、策划、设计、互动与制作

      查看详情
    • 大策略营销门户网站

      杭州派迪科技有自己的营销型网站cms系统,适合白帽seo网站。特别对大策略的营销型门户网站制作有一定的经验,曾经为上海天擎外贸行业网站、浙江兆龙营销型门户、先临三维门户营销网站提供全程的利来手机娱乐的技术支持及seo优化指导

      查看详情
    • 集团/上市公司网站

      杭州派迪科技为杭州本地集团公司提供网页设计、制作、开发服务,为集团公司网站建设提供了响应式、营销型、品牌型、门户型网站建设需求,欢迎广大集团公司客户咨询

      查看详情
    • 外贸网站建设

      杭州派迪科技为高端客户提供外贸网站咨询策划,外贸利来手机网址官网设计,外贸利来手机网址官网建设开发服务,以谷歌搜索引起算法为基础,为各行业外贸公司提供高端企业外贸网站定制、策划、设计、互动与制作

      查看详情
    • 企业网站建设

      高端专业、令人印象深刻的用户界面、易于访问——企业网站必须反映一切,因为派迪科技在这里提供帮助,凭借精湛的技术、丰富的经验、与客户的持续沟通以及对每一个细节的关注,我们确保在快速的周期时间内提供优质的服务。

      查看详情
    • 杭州派迪科技模板网站建设专题_各行业方案专题栏目提供各行业产品适合的网站建设方案,帮助企业了解派迪科技建站效果等信息,您可以通过本站了解各行业网站建设方案,如需要获取本行业定制网站建设方案,可以联系在线客服或拨打电话咨询

    体验从沟通开始,让我们聆听您的需求!

    开始您的数字化品牌体验! 0571-85815193 期待您的来电!

    [ 网站建设×品牌利来手机网址官网设计×大策略营销门户×微信小程序开发×微信公众号开发]

    派迪业务总监微信号

    了解最新项目报价

    派迪产品经理钉钉号

    免费获取项目方案

    我们正使用 cookie 来改善您的访问体验

    派迪科技非常重视您的个人隐私,当您访问我们的网站www.hzpady.com时,请同意使用所有cookie 。

    如果您想详细了解我们如何使用cookie请访问我们的 《隐私政策》

    cookie 偏好

    如果您想详细了解我们如何使用cookie请访问我们的 《隐私政策》

    管理cookie偏好

    基本 cookie

    始终允许

    这些 cookie 是网站运行所必需的,不能在我们的系统中关闭。它们通常仅针对您所做的相当于服务请求的操作而设置,例如设置您的隐私首选项、登录或填写表格。您可以将浏览器设置为阻止或提醒您有关这些 cookie 的信息,但网站的某些部分将无法运行。这些 cookie 不存储任何个人身份信息。

    性能 cookie

    始终允许
    这些 cookie 使我们能够计算访问量和流量来源,以便我们可以衡量和改进我们网站的性能。它们帮助我们了解哪些页面最受欢迎和最不受欢迎,并了解访问者如何在网站上移动。这些 cookie 收集的所有信息都是汇总的,而且是匿名的。如果您不允许这些 cookie,我们将不知道您何时访问了我们的网站,也无法监控其性能。

    功能性 cookie

    这些 cookie 收集信息用于分析和个性化您的定向广告体验。您可以使用此拨动开关来行使选择不获取个人信息的权利。如果您选择关闭,我们将无法向您提供个性化广告,也不会将您的个人信息交给任何第三方。

    定位 cookie

    这些 cookie 可能由我们的广告利来国际登录的合作伙伴通过我们的网站设置。这些公司可能会使用它们来建立您的兴趣档案,并在其他网站上向您展示相关广告。它们不直接存储个人信息,而是基于唯一标识您的浏览器和互联网设备。如果您不允许使用这些 cookie,您将体验到较少针对性的广告。

    我们正使用 cookie 来改善您的访问体验

    派迪科技非常重视您的个人隐私,当您访问我们的网站www.hzpady.com时,请同意使用所有cookie 。

    如果您想详细了解我们如何使用cookie请访问我们的 《隐私政策》