响应式_响应式布局 - CSDN
精华内容
参与话题
  • 响应式淘宝客系统是一个以finecms为核心进行开发的响应式淘客系统。 安装方法: 程序PHP,适应环境apache,MySQL 1.解压后,先修改 upload > config > database.ini.php 'host' => 'localhost'-------------数据库...
  • 一、css中@media写法 @media only screen and (min-width: 1024px)最小宽度1024 Safari版本5.1。7(7534.57.2)支持 chrome版本26.0.1410.64 m支持 opera版本12.15支持 fireFox版本21.0支持 IE10版本10.0.92000....

     、 css中@media写法

    @media only screen and (min-width: 1024px)最小宽度1024

    Safari 版本5.1。7(7534.57.2)支持
    chrome 版本26.0.1410.64  m 支持
    opera 版本12.15 支持
    fireFox 版本21.0 支持
    IE10 版本10.0.92000.16580  支持

     

    @media only screen and (max-width: 1024px)最大宽度

    同上都支持

     

    @media only screen and(min-width:800px) and (max-width:1024px)  宽度大于800 小于1024

    Safari 版本5.1。7(7534.57.2)b支持
    chrome 版本26.0.1410.64  m 支持
    opera 版本12.15 不支持
    fireFox 版本21.0 不支持
    IE10 版本10.0.92000.16580  不支持

     

    @media screen and (max-device-width: 1366px) 设备屏幕宽度小于1366

    Safari 版本5.1。7(7534.57.2)支持
    chrome 版本26.0.1410.64  m 支持
    opera 版本12.15 不支持
    fireFox 版本21.0 支持
    IE10 版本10.0.92000.16580  支持

    这种写法我们电脑测试的时候多数是不能出现效果的,应为需要设置我们设备的屏幕大小,我的电脑是1366*768的,所以设置成1366,如果变成1024或其他的数字,是看不到效果的,(除非在调整屏幕分辨率)

     

    @media screen and (min-device-width: 1366px)  设备屏幕大于1366

    同上

    例外:opera 在用@media screen and (min-device-width: 1366px)和@media screen and (max-device-width: 1366px)的时候,有一个很有趣的现象,我把分辨率调成1024*800的时候把最大宽度调成1366后他是可以用的,同理最小款款调成800也管用了,有些搞不懂了,如果哪位大牛知道,请指导一下!!!

     

    @media(max-width:1024px)

    Safari 版本5.1。7(7534.57.2)支持
    chrome 版本26.0.1410.64  m 支持
    opera 版本12.15 支持
    fireFox 版本21.0 支持
    IE10 版本10.0.92000.16580  支持

    @media(min-width:1024px)

    Safari 版本5.1。7(7534.57.2)支持
    chrome 版本26.0.1410.64  m 支持
    opera 版本12.15 支持
    fireFox 版本21.0 支持
    IE10 版本10.0.92000.16580  支持

    二、自适应网页设计(Responsive Web Design)

    随着3G的普及,越来越多的人使用手机上网。

    移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?

     

    手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。

    很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。

    于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?

    1、"自适应网页设计"的概念

    2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。

    他制作了一个范例,里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素,则6张图片并排在一

     

     

    如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行。

     

    如果屏幕宽度在400像素到600像素之间,则导航栏移到网页头部。

     

    如果屏幕宽度在400像素以下,则6张图片分成三行。

    2、允许网页宽度自动调整

    "自适应网页设计"到底是怎么做到的?其实并不难。

    首先,在网页代码的头部,加入一行viewport元标签

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

    viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

    所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js

      <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
      <![endif]-->

    3、不使用绝对宽度

    由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。

    具体说,CSS代码不能指定像素宽度:

      width:xxx px;

    只能指定百分比宽度:

      width: xx%;

    或者

      width:auto;

    4、相对大小的字体

    字体也不能使用绝对大小(px),而只能使用相对大小(em)。

      body {
        font: normal 100% Helvetica, Arial, sans-serif;
      }

    上面的代码指定,字体大小是页面默认大小的100%,即16像素。

      h1 {
        font-size: 1.5em; 
      }

    然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。

      small {
        font-size: 0.875em;
      }

    small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。

    5、流动布局(fluid grid)

    "流动布局"·的含义是,各个区块的位置都是浮动的,不是固定不变的。

      .main {
        float: right;
        width: 70%; 
      }

      .leftBar {
        float: left;
        width: 25%;
      }

    float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

    另外,绝对定位(position: absolute)的使用,也要非常小心。

    6、选择加载CSS

    "自适应网页设计"的核心,就是CSS3引入的Media Query模块。

    它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

      <link rel="stylesheet" type="text/css"
        media="screen and (max-device-width: 400px)"
        href="tinyScreen.css" />

    上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

      <link rel="stylesheet" type="text/css"
        media="screen and (min-width: 400px) and (max-device-width: 600px)"
        href="smallScreen.css" />

    如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

    除了用html标签加载CSS文件,还可以在现有CSS文件中加载。

      @import url("tinyScreen.css") screen and (max-device-width: 400px);

    7、CSS的@media规则

    同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

      @media screen and (max-device-width: 400px) {

        .column {
          float: none;
          width:auto;
        }

        #sidebar {
          display:none;
        }

      }

    上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。

    8、图片的自适应(fluid image)

    除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放

    这只要一行CSS代码:

      img { max-width: 100%;}

    这行代码对于大多数嵌入网页的视频也有效,所以可以写成:

      img, object { max-width: 100%;}

    老版本的IE不支持max-width,所以只好写成:

      img { width: 100%; }

    此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令

      img { -ms-interpolation-mode: bicubic; }

    或者,Ethan Marcotte的imgSizer.js

      addLoadEvent(function() {

        var imgs = document.getElementById("content").getElementsByTagName("img");

        imgSizer.collate(imgs);

      });

    不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。

     、移动页面自适应手机屏幕宽度

    网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方。

    1、使用meta标签

    这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

    首先解释该标签的含义:

    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    如果你完全不了解这个标签的使用需要先百度一下。

    解释:content中的“width” 这个width指的是什么宽度,我看过的文章对这个都没有解释的很清楚,有几个备选:虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等?经试验这个指的是虚拟窗口的宽度。了解宽度之后,对后续的各种scale,就应该知道是谁与谁的比例,是 虚拟窗口宽度 / 页面宽度,这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320  480720  1080 等各种尺寸而以上标签只能支持一种尺寸,当然有些浏览器会自动缩放使其适应屏幕,但这不是统一标准,正确的做法是用js动态生成此标签,当然,应该先获取屏幕尺寸。

    对于此标签还有以下需要分享:

    1)、user-scalable=no就一定可以保证页面不可以缩放吗?NO,有些浏览器不吃这一套,还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。

    2)、initial-scale=1.0   初始缩放比例受user-scalable控制吗?不一定,有些浏览器会将user-scalable理解为用户手动缩放,如果user-scalable=no,initial-scale将无法生效。

    3)、手机页面可以触摸移动,但是如果有需要禁止此操作,就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。

    4)、如果页面是经过缩小适应屏幕宽度的,会出现一个问题,当文本框被激活(获取焦点)时,页面会放大至原来尺寸。

    以上是使用viewport标签的一些小体会,分享给大家。

    2、第二种自适应屏幕尺寸的方法是将页面做成980宽度

    在没有viewport标签的情况下,移动设备屏幕范围会显示页面980的宽度,如果页面大于980,则在屏幕范围内显示页面一部分,如果页面小于980,则页面居中两侧显示空白,那么你猜,如果页面宽度等于980会出现什么情况呢?

    3、百分比法

    首先应明确一个概年,CSS中的百分比中的百指的是什么,我告诉你指的是父元素,所有百分比都是这样的。子元素宽度50%,那么父元素的宽度就是百,子元素的padding-left:50%,父元素的宽度是百,子元素的margin-top:20%,那么父元素的高是百。所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。

    4、使用css3单位rem

    有人这样解释rem,root-em,就是根部的em,想必em大家都懂的,那么rem就是将根节点html的font-size的值作为整个页面的基准尺寸,默认html的font-size是16px,即1rem=16px,如果某div宽度为32px你可以设为2rem。当我们把html的font-size设为20px时,1rem=20px,那么32px=1.6rem了。到这里我们也就了解了rem的用法了,那么怎么用rem来实现不同尺寸屏幕的自适应呢?在页面载入开始时首先判断window的宽度(是window的宽度($(window).width()),不是屏幕分辩率的宽度(screen.width),两者的差别请自行查阅),假设宽度为W,一个div在宽度为640px的设计稿的下的宽度为dW1,这样如果html的font-size为100px,那么这个div的宽度用rem表示是多少呢?计算:div宽度dW2=dW1/100,px与rem之间很好换算,除以100就可以,这是假定屏幕宽度为640的,而不同宽度的屏幕怎么处理,为了能保证换算容易那就要为html设置一个合适的font-size,计算:100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4;

    解释一下为什么把100作为一个缩放比例,用10或1不是更方便吗,这是因为大多数浏览器font-size的最小值为12px,所以只能用100了。

    5、媒体查询

    媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生,媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等,比如我们要为宽度小于480px的页面中的class="icon"的元素设置样式,可以这样写,@media screen and (max-width=480px) {.icon{ some styles }};这里仅介绍这种思路,关于媒体查询的详细用法请参阅css手册。

    综上,至今,我没有找到一种完全适应各种屏幕的方法,只能根据页面特点选择不同的方法。

    四, 通 过CSS3 Media Query实现响应布局

    讲到响应式布局, 相信大家都有一定的了解,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计(通过CSS3 Media Query实现响应布局)。

     

    一、什么是响应式布局?

    响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

      响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。

    二、响应式布局有哪些优点和缺点?

      优点:

      面对不同分辨率设备灵活性强

      能够快捷解决多设备显示适应问题

      缺点:

      兼容各种设备工作量大,效率低下

      代码累赘,会出现隐藏无用的元素,加载时间加长

      其实这是一种折衷性质的设计解决方案,多方面因素影响而达不到最佳效果

      一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

    三、响应式布局该怎么设计?

      我们在上面了解了什么是响应式布局,那在我们的实际项目中应该怎么去设计呢?在以往我们设计网站的时候都会受到不同浏览器的兼容性的困扰,现在还要来个不同尺寸设备,我们该怎么淡定下来呢?有需求就会有解决方案,呵呵,说到响应式布局,就不得不提起CSS3中的Media Query(媒介查询),这可是个好东西,易用、强大、快捷……Media Query是制作响应式布局的一个利器,使用这个工具,我们可以非常方便快捷的制造出各种丰富的实用性强的界面。接下来就一起来深入的了解Media Query。

      1、CSS中的Media Query(媒介查询)是什么?

      通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受 min和max用于表达”大于或等于”和”小与或等于”。如:width会有min-width和max-width媒体查询可以被用在CSS中的 @media和@import规则上,也可以被用在HTML和XML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设备,将会运用更加的广泛。

      2、media query能够获取哪些值?

      设备的宽和高device-width,device-heigth显示屏幕/触觉设备。

      渲染窗口的宽和高width,heigth显示屏幕/触觉设备。

      设备的手持方向,横向还是竖向orientation(portrait|lanscape)和打印机等。

      画面比例aspect-ratio点阵打印机等。

      设备比例device-aspect-ratio-点阵打印机等。

      对象颜色或颜色列表color,color-index显示屏幕。

      设备的分辨率resolution。

      3、语法结构及用法

      @media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}

      示例一:在link中使用@media:

      <link rel=“stylesheet” type=“text/css” media=“only screen and (max-width: 480px),only screen and(max-device-width: 480px)” href=“link.css”/>

      上面使用中only可省略,限定于计算机显示器,第一个条件max-width是指渲染界面最大宽度,第二个条件max-device-width是指设备最大宽度。

      示例二:在样式表中内嵌@media:

      @media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and(max-device-width:1024px) and (orientation:portrait) {srules}

      在示例二中,设置了电脑显示器分辨率(宽度)大于或等于1024px(并且最大可见宽度为989px);屏宽在480px及其以下手持设备;屏宽在 480px以及横向(即480尺寸平行于地面)放置的手持设备;屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。

      从上面的例子可以看出,字符间以空格相连,选取条件包含在小括号内,srules为兼容设置的样式表,包含在中括号里面。only(限定某种设备,可省略),and(逻辑与),not(排除某种设备)为逻辑关键字,多种设备用逗号分隔,这一点继承了css基本语法。

    4、可用设备名参数:

      http://img.educity.cn/article_image/2013082620/320579200044.png

      5、逻辑关键字:

      http://img.educity.cn/article_image/2013082620/320580200044.png

      

    6、可用设备名参数: http://img.educity.cn/article_image/2013082620/320581200045.png

      7、测试Media Queries

      最后,我们需要对我们刚刚设计的Media Queries进行测试,想要在不同设备上测试Media Queries的效果,可以使用一个浏览工具来检验不同尺寸屏幕下的显示效果,在这里为大家介绍一个不错的在线工具 – Responsivator,它可以模拟iPhone等各种不同设备,并且还可以自定义不同尺寸屏幕的显示效果,只需要输入一个url甚至是本地的一个 url(如),就可以看到网站在不同尺寸屏幕下的显示效果。

      8、通过Media Queries实现响应式布局设计

     好了,我们明白了什么是Media Query,那我们一起来运用到响应式布局的设计项目中去。设计思路很简单,首先先定义在标准浏览器下的固定宽度(假如标准浏览器的分辨率为 1024px,那么我们设置宽为980px),然后用Media Query来监测浏览器的尺寸变化,当浏览器的分辨率小于1024px的时候,则通过Media Query预设的样式表来将页面的宽度设置为百分比显示,这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。同理,当浏览器的可视区域改变到某个值(假如为650px)的时候,页面的结构元素根据Media Query预设的层叠样式表来进行相对应的调整。看看我们的例子:

      /* 当浏览器的可视区域小于980px */

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

      #wrap {width: 90%; margin:0 auto;}

      #content {width: 60%;padding: 5%;}

      #sidebar {width: 30%;}

      #footer {padding: 8% 5%;margin-bottom: 10px;}

      }

      /* 当浏览器的可视区域小于650px */

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

      #header {height: auto;}

      #searchform {position: absolute;top: 5px;right: 0;}

      #content {width: auto; float: none; margin: 20px 0;}

      #sidebar {width: 100%; float: none; margin: 0;}

      }

      通过上面我们就可以监测浏览器的可视区域变化的是时候我们的页面结构元素也会相对应的变化,当然你可以再多设置几个尺寸的监测层叠样式表,这样子就可以根据不同尺寸设备来进行响应式的布局。为了更好的显示效果,我们往往还要格式化一些CSS属性的初始值:

      /* 禁用iPhone中Safari的字号自动调整 */

      html {

      -webkit-text-size-adjust: none;

      }

      /* 设置HTML5元素为块 */

      article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

      display: block;

      }

      /* 设置图片视频等自适应调整 */

      img {

      max-width: 100%;

      height: auto;

      width: auto9; /* ie8 */

      }

      .video embed, .video object, .video iframe {

      width: 100%;

      height: auto;

      }

      最后要注意的是在页面的头部<head></head>之间加上下面这句∶

      <meta name=“viewport” content=“width=device-width; initial-scale=1.0”>

      meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。

      参数设置∶

      width – viewport的宽度

      height – viewport的高度

      initial-scale – 初始的缩放比例

      minimum-scale – 允许用户缩放到的最小比例

      maximum-scale – 允许用户缩放到的最大比例

      user-scalable – 用户是否可以手动缩放

      最后对于在IE浏览器中不支持media query的情况,我们可以使用Media Query JavaScript来解决,只需要在页面头部引用css3-mediaqueries.js即可。示例:

      <!--[if lt IE 9]>

      <script src=“

      </script> <![endif]-->

    9. 一个普通的自适应显示的三栏网页,当你用不同的终端来查看这个页面的时候,他会根据几种终端来显示不同的样式,在电脑上是三列,在pad上应该也是三列,在大屏手机上是三行,在屏幕小于320的手机上只显示主要内容,隐藏掉了次要元素。(这个demo也可以用拖动浏览器大小的方式测试。)

    这就是一个最简单的 响应式布局 的页面。我们就从这个例子里认识下media query属性吧。

    @media screen and (min-width: 320px) and (max-width : 479px)

    就从这个条件语句开始介绍,media属性后面跟着的是一个 screen 的媒体类型(上面说过的十种媒体类型之一)。然后用 and 关键字来连接条件(其他关键字还有 not, only,看字面大家能理解,就不多说。),然后括号里就是一个媒体查询语句,稍微懂点css的同学都能看懂,这个条件语句意思是在大于320小于479的分辨率下所激活的样式表。

    这个语句,就是响应式布局的基础应用了。在判断终端分辨率大小之后,赋予不同的样式进去,就像我们的例子里

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

    body{...}

    }

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

    body{...}

    }

    至于要判断多少种分辨率,完全取决于你产品的需求,常见的分辨率有手机,平板(注意这些终端是存在横屏竖屏区别的,这个下一篇里提),桌面显示器。自己为自己所面对的终端定制样式。

    一般大于960的显示器都可以用默认样式而不必在媒体查询里判断了。有一种情况除外,就是高像素比的终端,比如 iphone4以上的retina屏,一个iphone5的小小的屏幕(iphone的屏幕是真小啊),他的分辨率竟然达到了1136*640,如何让放大了两倍的屏幕显示依然清晰?

    在面对这种分辨率精细的终端,我们有另外一个条件查询语句 device-pixel-ratio

    比如例子里的

    @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

    就是判断终端的像素比是2的话,所渲染的样式。iphone4以上像素比是2,高分辨率Andriod设备像素比是1.5,例子里只有像素比为2的查询,1.5的或者其他比例方法一样,前面用的是几种浏览器的私有属性,最后一种是通用属性,

    @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

    等于

    @media only screen and (min-device-pixel-ratio: 2)

    为了一些版本的兼容性,不得已写的长了。

    body{

    font-size:24px;

    }

    .box2{

    background: url(d/20.png) #ccc;

    background-size:50%;

    }

    在像素比为2的终端里这样写的目的,就是让他显示的更容易识别,一般来说显示一张1px的背景图片,我们要准备一张2px的,然后再background-size:50%这样。1.5像素比同例。

    比如上面的demo,如果你用iphone4以上的苹果手机来看,中间的背景图片应该是显示“2.0像素比”。

    这里也暴露了响应式一个很大的缺点:需要多做若干背景图(作为内容显示的图片暂时无视,弹性图片与弹性字体,下次单独写一篇介绍博文介绍)。

    对于media query的兼容性,我想不是很重要,因为很少有终端自带IE9以下的浏览器。基本都是高级浏览器。如果特殊需要,可以下载一个兼容的JS文件

    <!--[if lt IE 9]>

    <scriptsrc="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

    <![endif]-->

    以条件注释的方式加在文件里。

    五、ie兼容响应式布局的实现总结

    虽然说响应式设计的理想状态是,需对pc/移动各种终端进行响应;但是现实是高分辨率的pc端与手机终端屏幕相差太大,像电商这样有大量图片和文字信息的同时排版要求精准的页面,设计一个同时适应高分辨率pc又适合小尺寸的手机终端是挑战;同时高分辨率下pc页面信息量巨大,对于手机端用户是否需要,也许会造成带宽浪费;再者手机终端和pc终端的用户操作习惯也相差甚大,这种多图多信息量要求精准的页面,设计出来恐怕会是2个完全不同的版本,也许各自维护更方便。由于业务形态原因,随着用户分辨率的提高,1024×768已不再是主流,宽屏用户比例越来越大,因此我们的响应式考虑如何充分利用PC 用户设备上更多空间而设计。下图为淘宝用户的屏幕分辨率和浏览器比例,鉴于ie8-浏览器目前占比约70%,media query的ie8-兼容迫于现实还是要做,泪……

    http://img02.taobaocdn.com/tps/i2/T1yDkZXnpeXXbOE93f-599-287.png

     

    media query简介

    miedia query2种引入方式:

    1.link标签方式

    "stylesheet" type="text/css" media="screen" href="sans-serif.css">

    "stylesheet" type="text/css" media="print" href="serif.css">

    2.css方式

    @media screen {

      * { font-family: sans-serif }

    }

    媒体类型有很多种:‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’‘embossed’‘speech’’3d-glasses’,但最常用的是screenprint,对于前端们来讲最常用的应该只有screen了。应用于所有媒体类 型可以用all,省略不写默认就是allmedia query支持很多表达式,常用的如下,完整的查看这里

    @media all and (min-width: 400px) and (max-width: 700px) { }

    @media all and (orientation: portrait) {    }

    @media and (min-device-width: 800px) { }

    利用media query可以轻松实现不同屏幕宽度时切换不同的页面布局,但是很不幸ie8及以下都还不支持media query,于是开始了下面的media query兼容之旅……

    目前实现media query ie兼容的库比较成熟的有respond.jscss3-mediaqueries-js它们各有优劣respond.js压缩后1k,只实现了media query中最常用的min-width max-width的兼容;css3-mediaqueries-js基本实现了所有css3规范中的media query特性的兼容,所以导致压缩有16k,测试反馈其性能远低于respond.js;不过确实一淘首页2次响应式设计均只需用到max-width min-widthModernizr  H5BP 也均推荐使用respond.js,下面具体看看它们的实现吧

    respond.js源码分析

    使用方式

    官方demo地址:http://scottjehl.github.com/Respond/test/test.html

    1.css中正常用 min/max-width media queries

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

            ...styles for 480px and up go here

        }

    2. 引入respond.min.js,但要在css的后面(越早引入越好,在ie下面看到页面闪屏的概率就越低,因为最初css会先渲染出来,如果 respond.js加载得很后面,这时重新根据media query解析出来的css会再改变一次页面的布局等,所以看起来有闪屏的现象)

    实现思路

    1.head中所有的css路径取出来放入数组

    2.然后遍历数组一个个发ajax请求

    3.ajax回调后仅分析response中的media querymin-widthmax-width语法,分析出viewport变化区间对应相应的css

    4.页面初始化时和window.resize时,根据当前viewport使用相应的css块。

    window.matchMedia = window.matchMedia || (function(doc, undefined){

      var bool,

          docElem  = doc.documentElement,

          refNode  = docElem.firstElementChild || docElem.firstChild,

          // fakeBody required for

          fakeBody = doc.createElement_x('body'),

          div      = doc.createElement_x('div');

      div.id = 'mq-test-1';

      div.style.cssText = "position:absolute;top:-100em";

      fakeBody.style.background = "none";

      fakeBody.appendChild(div);

      return function(q){

        div.innerHTML = '­';

        docElem.insertBefore(fakeBody, refNode);

        bool = div.offsetWidth == 42;

        docElem.removeChild(fakeBody);

        return { matches: bool, media: q };

      };

    })(document);

    //检测是否支持media query,检测css是否有效的方法都差不多,创建一个元素应用该css后检测元素宽度,然后清除该元素。

    .......

    if( !!href && isCSS && !parsedSheets[ href ] ){

        // selectivizr exposes css through the rawCssText expando

        if (sheet.styleSheet && sheet.styleSheet.rawCssText) {

                    //sheet.styleSheet.rawCssText看不懂,原来是方便selectivizrrespond.js联用,http://selectivizr.com/tests/respond/

                    //selectivizr的作用是 CSS3 selectors for IE;约定将原csstext放在styleSheetlink上的扩展属性rawCssText上;这里如果联用selectivizr可以少次ajax请求

            translate( sheet.styleSheet.rawCssText, href, media );

            parsedSheets[ href ] = true;

        } else {

            if( (!/^([a-zA-Z:]*\/\/)/.test( href ) && !base)

                || href.replace( RegExp.$1, "" ).split( "/" )[0] === win.location.host ){

                requestQueue.push( {

                    href: href,

                    media: media

                } );

            }

        }

    }

    .......

    其余的代码就是ajax实现和translate media querymax-width min-width的逻辑了;可以看出这里必须依赖ajax请求css路径才能得到css文件中的mediaquery的内容,那ajax的跨域问题就要 解决了;由于我们的静态资源都是要放cdn的,respond.js也给出了跨域方法,即引入代理页面。

    //cross-domain/respond-proxy.html 放到cdn

    //cross-domain/respond.proxy.gif 放到当前域服务器上

    "http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />

    "/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />

    "/path/to/respond.proxy.js">

    这里ajax跨域实现是通过代理页面将获取到的css,再通过window.name通信实现;如在respond.proxy.js

    function checkFrameName() {

        var cssText;

        try {

            cssText = iframe.contentWindow.name;

                    var now = new Date().getTime(),useTime = now - initTime;

            alert('获取css耗时:'+ useTime + 'ms');

        }

    catch (e) { }

     

        if (cssText) {

            ……//销毁之前用于通信的iframe,后续回调callback

            callback(cssText);

        }

        else{

            win.setTimeout(checkFrameName, 100);

        }

    }

    win.setTimeout(checkFrameName, 500);//500ms后确认内部iframename值是否传递过来,后续再更新当前viewport该用的css

    因为实现跨域代理的问题,初始化页面时应用上全部css耗时较长,以下光测试从开始执行该js文件到css取回调用之前的耗时为500ms-515ms之间(每次刷新结果不一样),ie8下测试结果如下

    http://img03.taobaocdn.com/tps/i3/T10Xg1Xl0cXXXxfAUk-634-396.png

    测试结果发现,刷新页面后会有明显的闪屏(以该测试demo为例,一开始页面背景是黑色的,这是默认css中的,跨域js执行完成后分析出 media query中的该viewport尺寸下应该应用red的背景,所以又变成红色),间隔时间为500ms以上。所以体验不是很好,而且该场景中ajax 域目前已经没有更好的实现方式,500ms间隔的闪屏避免不了。

    同时因为是ajax请求css,所以会因为响应式而额外产生一个请求,好在之前css请求过一遍,这次ajax请求是读取浏览器缓存中的,如下图中fiddler的检测结果中的第三个请求和第六个请求:

    http://img04.taobaocdn.com/tps/i4/T1IHM0XaleXXaqU36o-600-217.png

    respond.js总结

    优点:压缩后仅1k,不跨域时性能ok,只需引入respond.js通用易用

    缺点:仅支持media querymin-widthmax-width(用于响应式够用);支持跨域,虽然配置有点麻烦,实现跨域代价高而且有闪屏体验欠佳。

    css3-mediaqueries-js源码分析

    css3-mediaqueries-js官方文档和demo都没有,相对于respond.js css3-mediaqueries-js支持几乎所有的media query的语法,访问测试demo

    实现逻辑

    其实现逻辑和respond.js差不多,只是更加支持的media query更加全面,同时支持内联style,支持各种宽度单位(em|ex|px|in|cm|mm|pt|pc),但是这里的初始化是在 domready后执行,为了让用户感觉不出页面有闪屏(之前应用初始化样式然后js提取media query中的样式再覆盖一遍)现象,这里的实现是先将html移出可视区域外,等解析完media query后再重置回来,但实际目测感觉稍有闪屏(当然这里的测试是测试body背景色,移出可视区域外不管用,当然绝大部分响应式场景是适用的),实现如下:

    // prevent jumping of layout by hiding everything before painting 先将html移出可视区域外

    var docEl = document.documentElement;

        docEl.style.marginLeft = '-32767px';

    // make sure it comes back after a while 异常处理,万一获取mediaquery css失败,重置回来

    setTimeout(function () {

      docEl.style.marginTop = '';

    }, 20000);

     

    ……

     

    // return visibility after media queries are tested 生效后重新可见

    cssHelper.addListener('cssMediaQueriesTested', function () {

        // force repaint in IE by changing width

        if (ua.ie) {

            docEl.style.width = '1px';

        }

        setTimeout(function () {

            docEl.style.width = ''; // undo width

            docEl.style.marginLeft = ''; // undo hide

            var now = new Date().getTime();

            var useTime = now - initTime;

            alert('media query生效时间:'+useTime+'ms');

        }, 0);

        // remove this listener to prevent following execution

        cssHelper.removeListener('cssMediaQueriesTested', arguments.callee);

    });

    其余实现和respond.js基本一致,也需要使用ajax,所以css3-media-queries.js本身不支持跨域,当然非要支持跨域 也可以,也可以像respond.js一样使用代理页面跨域即可,但也会出现闪屏的现象。还是先看看不跨域情况下,大多数人为什么选择 respond.js,主要原因还是完美支持的media query特性导致压缩后16K,下载和执行时间都逊于respond.js,下面是同域下在ie8的测试结果(耗时140msrespond.js 15ms):

    http://img01.taobaocdn.com/tps/i1/T1xMo1Xk0bXXXloQTy-500-383.png

    http://img03.taobaocdn.com/tps/i3/T1hT71XedaXXa5OP2y-500-276.png

    css3-mediaqueries-js总结

    优点:1、基本支持所有css3中的media query语法

    缺点:1、不支持跨域(如cdn),就算支持了跨域也存在闪屏现象;2、和respond.js对比性能较差

    全局切换class

    因为css/js需要放到cdn上面,需要跨域,css3-mediaqueries-js不支持跨域,respond.js支持跨域但是实现跨域后性能较差,有闪屏体验也差,而且配置麻烦,不方便各个业务通用。对比respond.jscss3-mediaqueries-js可知,实现响应式 应用min-widthmax-width足矣;同时模拟media query的效果只需要在2个关键时间点根据viewport切换css(初始化页面时和window.resize)即可。所以可以选择切换css link,可以动态切换css,也可以切换class

    切换css link(优点:逻辑清晰;缺点:增加请求数,维护麻烦,如修改一个模块涉及到3个尺寸的响应,至少需要改3个文件)

    "stylesheet" type="text/css" media="screen and (max-width: 990px)" href="respond750.css&uuot;>

    stylesheet" type="text/css" media="screen and (max-width: 1200px)" href="respond990.css">

    切换内联css(respond.jscss3-mediaqueries-js就是通过js分析出media query然后自动根据当前viewport切换css块,这个理想环境下是最好的,自动分析只管写media query,但是依赖ajax获取css内容,跨域实现成本高体验也不好)

    全局切换class(特别是初始化页面时最好在页面内容未开始渲染之前切换class,不然会出现像韩国naver购物频道在宽屏时刷新效果,刷新时内容由中间向外偏),特定viewport用特殊全局class标记,响应式样式继承在该class下,实现大致如下:

    实现方式

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

       .content {

          width: 990px;

          color: red;

       }

    }

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

       .content {

          width: 1200px;

          color: green;

       }

    }

    .w990 .content {

      width: 990px;

      color: red;

    }

    .w1200 .content {

      width: 1200px;

      color: green;

    }

    "w990">

    "content">content

    全局切换class这种方式维护也是个问题,首先是js分散2处,body最上方切换全局classdomreadywindow.resize时切换class,同时响应式尺寸增加时,需要改变js判断条件;再看css的维护,media query一份,加全局class一份相同的,维护需要同时修改2次,初期media query几十行也能接受,但是后来改版media query几百行,这样维护成本就大大增加了,全局classmedia query copy相同的代码引入less解决,使用方法如下:

    #channels {

      .w1200() {

        .etao-channels {

          padding: 170px 0 0 30px;

     

          li {

            margin-right: 25px;

          }

        }

      }

      .w990() {

        .etao-channels {

          padding: 25px 0 0 15px;

     

          li {

            margin-right: 8px;

          }

        }

      .w750() {

        .etao-channels {

          padding: 5px 0 0 5px;

     

          li {

            margin-right: 5px;

          }

          a {

            color: #333;

          }

        }

      }

    }

    // 这样只需维护上面一处代码即可

    #channels > .w1200;

    @media (max-width: 1119px) {

      #channels > .w990;

    }

    @media (max-width: 989px) {

      #channels > .w750;

    }

    .w990 {

      #channels > .w990;

    }

    .w750 {

      #channels > .w750;

    }

    目前一淘新首页采用以上方法维护,支持1200px990px750px三个尺寸的响应,不得不承认维护成本还是偏高,欢迎各种改进建议,

    展开全文
  • CSS3 响应式布局实例

    千次阅读 2018-05-20 16:27:42
    布局实例掌握了响应式设计的核心技术之后,你可以迫不及待想要使用它来构建响应式网站了。也许你会认为响应式设计有点复杂,但事实上,它比你想象的要简单。下面通过构建一个响应式的页面基本布局,让你快速了解如何...

    掌握了响应式设计的核心技术之后,你可以迫不及待想要使用它来构建响应式网站了。也许你会认为响应式设计有点复杂,但事实上,它比你想象的要简单。

    下面通过构建一个响应式的页面基本布局,让你快速了解如何使用响应式设计技术来构建响应式网站。

    首先,创建HTML结构和页面布局。

    最常见基本布局将页面划分为 4 个部分,分别是头部、主内容区、侧边栏和页脚,而主内容区和侧边栏一般都会包含在一个容器中。如:

    1. <body>
    2. <header>header</header>
    3. <div id="wrapper">
    4.      <main>main</main>
    5.      <aside>aside</aside>
    6. </div>
    7. <footer>footer</footer>
    8. </body>

    如果一个元素的宽度为 auto 或百分比,它就具有响应性,它就会随着浏览器窗口尺寸的改变,而自动调整宽度。这里将主内容区的宽度为 78%,侧边栏的宽度为 20%,而 header 和 footer使用自动宽度,无需进行设置。

    1. main {
    2.     width: 78%;
    3.     float: left;
    4. }
    5. aside {
    6.     width: 20%;
    7.     float: right;
    8. }

    由于 #wrapper 只包含浮动元素,可以通过 overflow: hidden 来创建一个块格式化上下文,让它能够包含浮动元素。再为它设置适当的外边距,让各个元素之间泾渭分明。

    1. #wrapper {
    2.     margin: 10px auto;
    3.     overflow: hidden;
    4. }

    为了方便查看效果,让头部、主内容区、侧边栏、页脚都具有 40px 的固定高度和 1px 的实线边框。

    1. header, main, aside, footer {
    2.     height: 40px;
    3.     border: 1px solid #ccc;
    4. }

    其次,通过 meta 标签,设置视口的宽度,并禁止默认缩放。

    视口(viewport)指的是浏览器(包括桌面浏览器和移动浏览器)显示页面的区域,它只是浏览区域,并不包含地址栏、按钮等区域。媒体查询中的 width 特性指是视口的宽度,而 device-width特性指的是屏幕的宽度。

    在大多数移动设备上,默认情况下,这两个值通常不一样。如,iPhone的视口区域默认是 980 像素宽,而它的屏幕只有 320 像素宽。因此,iPhone 会按980 像素宽来显示页面,并将页面缩小,以适应 320 像素的屏幕宽度,就会显示为网站缩小后的样子。

    幸运的是,在页面的头部添加 meta 元素,可以使该问题迎刃而解:

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

    这段代码的重点是 width=device-width,它将视口的宽度设置为设备的屏幕宽度,来让网页的宽度自动适应移动设备的屏幕宽度。而 initial-scale=1.0 表示页面按实际尺寸显示,不进行缩放。

    在移动设备的浏览器上,通过添加 user-scalable=no,可以禁用其缩放功能。禁用缩放功能后,用户只能滚动屏幕,这样能让你的网站看上去更像原生应用。但并不推荐所有的网站都使用这种方式,是否使用这种方式要视情况而定。

    1.  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    最后,设置断点,让布局适应不同视口宽度。

    通过媒体查询设置不同的断点,为不同的视图宽度指定不同的CSS规则,让浏览器根据指定的视图宽度渲染页面,来实现响应式布局。

    可以根据需要添加任意多个媒体查询断点,为了简单起见,这里只添加一个断点。如,希望在视口宽度小于等于 480px 时,将 main 和 aside 的宽度设置为 auto 并取消浮动,让它们全屏显示:

    1. @media screen and (max-width: 480px) {
    2.     main {
    3.         width: auto;
    4.         float: none;
    5.     }
    6.     aside {
    7.         width: auto;
    8.         float: none;
    9.         margin-top: 10px;
    10.     }
    11. }

    针对不同的屏幕尺寸定义媒体查询后,用户在改变浏览器窗口大小的过程中,浏览器会根据视口的尺寸自动重新渲染页面。

    如,当视口宽度大于 480px 时,main 和 aside 在一行内显示,并各占一栏,宽度分别为 78% 和 20%。运行结果如图 9‑22 所示:

    视口宽度大于480px时的布局效果图9-22 视口宽度大于480px时的布局效果

    当视口宽度小于 480px 时,main 和 aside 都全屏显示,各自独占一行。运行结果如图 9‑23 所示:

    视口宽度大于480px时的布局效果图9-23 视口宽度大于480px时的布局效果

    当然,构建响应式网站要考虑的因素很多,远比这个要复杂。本实例仅仅是抛砖引玉,只简单介绍了构建响应式网站的基本过程,要了解响应式设计的更多技术,还要阅读专门介绍响应式设计的书籍,如《响应式Web设计:HTML5和CSS3实战》等。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • 1.前端WEB响应式布局实战-搭建项目 2.前端WEB响应式布局实战-响应式头部 3.端WEB响应式布局实战-banner&footer 4.端WEB响应式布局实战-service部分 5.前端WEB响应式布局实战-team部分 8.前端WEB响应式布局实战-...
  • 响应式实例

    千次阅读 2018-10-03 20:24:38
    效果一、 100%是红色 宽&amp;amp;lt;=980px蓝色 &amp;amp;lt;=580px黑色 &amp;amp;lt;=380px黄色 源码: &amp;amp;lt;style&amp;amp;gt; /* &amp;amp;...

    效果一、
    100%是红色
    宽<=980px蓝色
    <=580px黑色
    <=380px黄色
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    源码:

    <style>
            /* >980px */
            div{
                width: 100%;
                height: 100px;
                background: red;
            }
            /* <=980px */
            @media screen and (max-width: 980px){
                div{
                    background: blue;
                }
            }
            /* <=580px */
            @media screen and (max-width: 580px){
                div{
                    background: black;
                }
            }
            /* <=380px */
            @media screen and (max-width: 380px){
                div{
                    background: gold;
                }
            }
        </style>
    <body>
        <div></div>
    </body>
    

    效果二、
    在这里插入图片描述
    缩小窗口

    btn.png用到的图片如上
    源码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>响应式导航</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                font: 14px/22px "宋体", arial, serif;
            }
            .clearfix::after {
                display: block;
                clear: both;
                content: "";
                height: 0;
                visibility: hidden;
            }
            .navbar {
                margin-top: 80px;
                width: 100%;
                background: #333;
            }
            .nav {
                margin: 0 auto;
                width: 1000px;
                height: 50px;
                position: relative;
            }
            .nav ul {
                list-style: none;
            }
            .nav ul li {
                float: left;
            }
            .nav ul li a {
                display: block;
                line-height: 50px;
                font-size: 16px;
                color: #fff;
                text-decoration: none;
                padding: 0 30px 0 30px;
            }
            .nav ul li:hover a {
                color: #f60;
            }
            .nav ul li.current {
                background: #f60;
            }
            .nav ul li.current:hover a {
                color: #fff;
            }
            .nav .hot {
                display: inline-block;
                margin-left: 20px;
                line-height: 48px;
                position: absolute;
                top: 0;
                right: 0;
            }
            .nav .hot a {
                padding: 0 5px 0 5px;
                font-size: 12px;
                color: #fff;
                text-decoration: none;
            }
            .nav .hot a:hover {
                color: #f60;
                text-decoration: underline;
            }
            .nav .title {
                display: none;
            }
            @media screen and (max-width: 640px) {
                .navbar {
                    margin-top: 0;
                    background: #444;
                }
    
                .nav {
                    width: auto;
                    height: auto;
                }
                #menu {
                    display: none;
                }
                .nav ul li {
                    margin-top: 1px;
                    width: 100%;
                    min-width: 100px;
                    background: #333;
                }
                .nav .hot {
                    display: none;
                }
                .nav .title {
                    display: block;
                    width: 100%;
                    height: 50px;
                    background: #333;
                    text-align: center;
                    font: normal 20px/35px "Microsoft YaHei", arial, serif;
                    letter-spacing: 2px;
                    position: relative;
                }
                .nav .title a {
                    color: #f60;
                    text-decoration: none;
                    line-height: 50px;
                }
                .nav .title .btn {
                    position: absolute;
                    right: 10px;
                    top: 8px;
                    width: 34px;
                    height: 34px;
                    background: url(btn.png) center center no-repeat;
                    cursor: pointer;
                }
            }
        </style>
    </head>
    <body>
        <div class="navbar" class="clearfix">
            <div class="nav">
                <h1 class="title">
                    <a href="#">风驰网</a>
                    <span class="btn"></span>
                </h1>
                <ul id="menu">
                    <li class="current">
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">电影</a>
                    </li>
                    <li>
                        <a href="#">电视剧</a>
                    </li>
                    <li>
                        <a href="#">动漫</a>
                    </li>
                    <li>
                        <a href="#">综艺</a>
                    </li>
                    <li>
                        <a href="#">纪录片</a>
                    </li>
                    <li>
                        <a href="#">公开课</a>
                    </li>
                </ul>
                <p class="hot">
                    <a href="#">钢铁侠3</a>
                    <a href="#">中国合伙人</a>
                    <a href="#">盛夏晚晴天</a>
                    <a href="#">陆贞传奇</a>
                </p>
    
            </div>
        </div>
        <script>
            var menu = document.querySelector("#menu");
            var title = document.querySelector(".title");
            title.addEventListener("click", function () {
                menu.style.display = menu.style.display == "block" ? "none" : "block";
            })
        </script>
    </body>
    </html>
    

    实例三、
    效果:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    源码:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>图片库</title>
        <style>
            /* CSS初始化 reset.css normalize 
            各大网站的初始化代码:
            https://www.cnblogs.com/liumobai/p/5005623.html
    
            reset.css
            https://meyerweb.com/eric/tools/css/reset/
    
            normalize.css(推荐使用)
            https://necolas.github.io/normalize.css/
            */
    
            * {
                box-sizing: border-box;
            }
            body {
                margin: 0;
            }
            header {
                height: 60px;
                line-height: 60px;
                background-color: black;
                color: white;
                text-align: center;
            }
            main {
                margin: 5px;
                display: flex;
                flex-wrap: wrap;
            }
            img {
                margin: 5px;
                /* 100%指父元素main的宽度,40px指每个图片左右外边距之和 */
                width: calc((100% - 40px) / 4);
            }
            /* 媒体设备,all,screen等和操作符可省略,直接写判断
            设备宽度<=1150px
            */
            @media all and (max-width:1150px) {
                img {
                    width: calc((100% - 30px) / 3);
                }
            }
            @media (max-width:770px) {
                img {
                    width: calc((100% - 20px) / 2);
                }
            }
            @media (max-width:520px) {
                img {
                    margin: 2.5px;
                    width: calc((100% - 5px));
                }
                main {
                    margin: 2px;
                }
            }
        </style>
    </head>
    
    <body>
        <header>图片库</header>
        <main>
            <img src="images/1.jpg" alt="">
            <img src="images/2.jpg" alt="">
            <img src="images/3.jpg" alt="">
            <img src="images/4.jpg" alt="">
            <img src="images/5.jpg" alt="">
            <img src="images/6.jpg" alt="">
            <img src="images/7.jpg" alt="">
            <img src="images/8.jpg" alt="">
            <img src="images/9.jpg" alt="">
            <img src="images/10.jpg" alt="">
            <img src="images/11.jpg" alt="">
            <img src="images/12.jpg" alt="">
            <img src="images/13.jpg" alt="">
            <img src="images/14.jpg" alt="">
            <img src="images/15.jpg" alt="">
            <img src="images/16.jpg" alt="">
            <img src="images/17.jpg" alt="">
            <img src="images/18.jpg" alt="">
            <img src="images/19.jpg" alt="">
            <img src="images/20.jpg" alt="">
        </main>
    </body>
    </html>
    

    图片自行找吧

    用到的媒体查询不懂的可以参考
    CSS长度单位 和 CSS响应式(媒体查询)

    展开全文
  • 1.响应式基本概念

    2018-07-05 21:33:25
    用电脑打开苹果或星巴克的官网,一点点缩小浏览器的窗口,你会发现,窗口虽然变小了,但不影响阅读,这就是响应式 1.什么是响应式 这里补充两个概念: * 渐进增强:先对正常的浏览器做适应,也就是让...

    用电脑打开苹果或星巴克的官网,一点点缩小浏览器的窗口,你会发现,窗口虽然变小了,但不影响阅读,这就是响应式

    1.什么是响应式

    image.png
    image.png
    image.png
    image.png
    这里补充两个概念:
    * 渐进增强:先对正常的浏览器做适应,也就是让所有浏览器都兼容,然后再对可以设置CSS3等高级属性的高版本浏览器再进行优化,也就是对于高版本的浏览器,让用户体验更好一点
    * 优雅降级:先设计高版本浏览器样式,然后在根据低版本浏览器兼容性进行处理

    2.实现响应式

    image.png
    image.png
    如果用bootstrap布局的话,那就非常简单了,直接拿定义好的class名就行了,想要啥样式,就去找就行了,今天我们主要学的是CSS3**媒体查询**
    在编辑器,输入meta:vp 然后敲tab键,你会发现

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

    这样一行代码,有啥用呢

    我们发现在用浏览器打开页面,打开手机模式的时候,字体会变的很小,原因是页面宽度大于设备屏幕的宽度,所以会整体缩小,字体也就缩小了,
    image.png

    而如果加meta这一行,页面宽度等于设备宽度了,字体也变大了
    image.png

    引入媒体查询的方式
    可以放在link里

    image.png
    上述代码表示当宽度小于等于500的时候,就用CSS2里的样式覆盖css1里的,css2一定要在下面才能覆盖
    上面我们是在link标签里引入了media,但是如果判断条件很多的话,就不行了,最好的做法也是我们一般做法,在css文件里写media媒体查询,做判断

    *{
        margin: 0;
        padding: 0;
    }
    #div1{
        height: 50px;
        background: #ff0;
    }
    @media screen and ( max-width:600px){
        #div1 {
            background: #f00;
        }
    }

    上述代码表示,当屏幕宽度小于等于600px的时候,div的背景色由黄色变成红色
    * 条件外面有小括号包着
    * media里面不要忘了写选择器,别只写样式了

    orientation 设备方向
    image.png

    image.png

    • 上述代码表示,当横屏的时候,背景颜色变成粉色
    • 移动端设备方向默认是竖屏的portrait

    屏幕分辨率
    苹果4以后用视网膜屏,一像素的屏幕能显示两像素的东西,所以非常清楚

    今天先简单的了解一下,明天再接着学,困死了,宝宝要睡觉了

    展开全文
  • 什么是响应式系统

    千次阅读 2018-08-07 20:05:10
    什么是响应式系统(Reactive System),为什么需要响应式系统? 几年之前,大型应用就是几台服务器,几个G的数据,数秒的响应时间,甚至还可以有每天几个小时的离线维护时间。但是现在,随着设备终端的极具增多,...
  • 其实自适应更专业的说法是响应式网站。在2010年5月,Ethan Marcotte提出的响应式网站的概念,通俗的说,就是一个网站可以兼容不同的终端,不用为每个分辨率设备做一个特定的版本的网站。近年来,各种大屏幕移动设备...
  • 响应式的优点和缺点?? 】 大家好,我是IT修真院北京分院25期的学员,一枚正直纯洁善良的web前端程序员 今天给大家分享一下,修真院官网css任务9,深度思考中的知识点——响应式的优点和缺点?? ...
  • 响应式布局的实现方法和原理

    万次阅读 2018-01-02 18:05:26
    昨天我在马海祥博客上跟大家详细的介绍过《什么是响应式网页设计?》,我觉的响应式网页设计不仅仅是一种趋势,还更是一个新的设计解决方案!它有助于解决不同的分辨率和设备(台式电脑,笔记本电脑,平板,手机)...
  • element-UI响应式(原理)- 讲解 element-UI官方说明:响应式布局 参照了 Bootstrap 的 响应式设计,预设了五个响应尺寸:xs、sm、md、lg 和 xl。 Element 额外提供了一系列类名,用于在某些条件下隐藏元素。 ...
  • 响应式图像--图片自适应大小

    万次阅读 2016-09-08 10:46:17
    之前在做图片自适应的时候想到的办法是把图片作为背景然后添加background-size:100%;让图片填满整个盒子的方式来实现... src="..." class="img-responsive" alt="响应式图像"> 通过添加 img-responsive class 可
  • 用3个步骤实现响应式网页设计

    万次阅读 多人点赞 2011-12-18 23:36:03
    写在前面的话:随着移动设备的逐渐普及和Web技术的发展,跨端的Web开发需求将会越来越大。... 文中提到的响应式网页设计(Responsive web design)是一种现代网页设计方法,基于CSS3的媒介查询(Media Quer
  • 响应式Spring的道法术器(Spring WebFlux 教程)

    万次阅读 多人点赞 2020-01-23 11:48:16
    Spring 5 之使用Spring WebFlux开发响应式应用。 lambda与函数式(15min) Reactor 3 响应式编程库(60min) Spring Webflux和Spring Data Reactive开发响应式应用(45min) 通过以上内容相信可以对Spring 5.0 ...
  • Vue框架设置响应式布局

    万次阅读 多人点赞 2019-11-13 12:43:42
    回到主题,自适应响应式布局这个话题古老而新颖,从最早的不同分辨率的屏幕,到现在遍布各个生活角落的移动设备,响应式布局已经成了几乎所有互联网公司必备的条件。在我的映像中,bootstrap一直是响应式的头号选择...
  • Bootstrap 样式之 响应式图片的处理

    万次阅读 2018-03-07 15:32:48
    在实际的开发过程中,利用Bootstrap 制作响应式网站,很多时候会涉及到图片的处理问题,也就是图片的缩放问题,我们先来看看自然情况下的图片显示:(测试版本 3.x)情景:假设我们在一个 div 中放置一张图片,div ...
  • 自适应和响应式的介绍和区别

    万次阅读 2018-06-13 11:23:16
    [百科]:响应式设计是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 自适应设计...
  • 超小屏幕:(手机,小于768px)。小屏幕:(平板,大于等于768px)。中等屏幕:(桌面显示器,大于等于992px)。大屏幕:(大桌面显示器,大于等于1200px)。...
  • 用CSS实现响应式布局

    万次阅读 2018-07-30 15:31:26
    响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局 要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用 使用@media 的三种方式 第一: 直接在CSS文件中使用 @media 类型 and (条件...
  • 10款优秀Bootstrap响应式后台管理系统模板

    万次阅读 多人点赞 2013-12-19 21:53:08
    1 metro win8 风格模板 演示地址(http://www.js-css.cn/divcss/admin/metro/)   2 多颜色主题功能强大ACE后台模板 (Bootstrap3模板) 演示地址...3 灰常漂亮
1 2 3 4 5 ... 20
收藏数 387,886
精华内容 155,154
关键字:

响应式