响应式布局_响应式布局框架 - CSDN
响应式布局 订阅
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。 展开全文
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。
信息
优    点
面对不同分辨率设备灵活性强等
提出时间
2010年5月
英    文
Responsive layout
中文名
响应式布局
目    的
解决移动互联网浏览
解    释
一个网站能够兼容多个终端
响应式布局优点和缺点
优点: [1]  面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点: [1]  兼容各种设备工作量大,效率低下代码累赘,会出现隐藏无用的元素,加载时间加长其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构,会出现用户混淆的情况
收起全文
精华内容
参与话题
  • HTML响应式布局实现详解

    万次阅读 多人点赞 2018-08-06 15:29:00
    第一步:在网页代码的头部,加入一行viewport元标签 (1)viewport是网页默认的宽度和高度,上面这行代码的意思是:网页宽度默认等于屏幕宽度 (width=device-width),原始缩放比例(initial-scale=1)为1.0,即...

    第一步:在网页代码的头部,加入一行viewport元标签

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

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

    所有主流浏览器都支持这个设置,包括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]-->

    (2)X-UA-Compatible

    X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。 通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置。

     #IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。

    <meta http-equiv="X-UA-Compatible" content="IE=7"> 

    #IE浏览器,IE8/9都会以IE8引擎来渲染页面。

    <meta http-equiv="X-UA-Compatible" content="IE=8">

    #IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。

    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    <meta http-equiv="X-UA-Compatible" content="IE=7,9">

    #IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame。

    这里的chrome=1不是说IE的技术增强了可以模拟Chrome浏览器,而是与谷歌开发的Google Chrome Frame(谷歌内嵌浏览器框架GCF)有关。这个插件可以让用户的IE浏览器外观不变,但用户在浏览网页时实际上使用的是Chrome的内核,并且支持Windows XP及以上系统的IE6/7/8。

    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

    第二步:流动布局

    页面中各个区块的位置都是浮动的,不是固定不变的,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现

    .left{ width:30%; float:left}
    .right{ width:70%; float:right;}

     

    第三步:CSS的@media规则,选择性加载CSS

    @media screen and (max-device-width: 400px) {  .left{ float:none;} }

    当屏幕小于400时,left取消了浮动。

    "自适应网页设计"的核心,就是CSS3引入的Media Query模块。自动探测屏幕宽度,然后加载相应的CSS文件,如果屏幕宽度小于600像素(max-device-width: 600px),就加载css600.css文件。如果屏幕宽度在600像素到980像素之间,则加载css600-980.css文件。

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

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

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

     

    第四步:不使用绝对宽度,字体大小

    (1)width:auto; / width:XX%;

    (2)字体大小是页面默认大小的100%,即16像素。字体不要使用绝对大小"PX",要使用相对大小“REM”

    html{font-size:62.5%;} body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }

     

    第五步:图片的自适应

    "自适应网页设计"还必须实现图片的自动缩放。

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

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

    img {width: 100%;}

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

    img { width:100%; -ms-interpolation-mode: bicubic;}

    或使用js--imgSizer.js

    addLoadEvent(function() {     
            var imgs = document.getElementById("content").getElementsByTagName("img");           imgSizer.collate(imgs);   
    });

     

    展开全文
  • 响应式布局

    千次阅读 2016-09-19 14:37:17
    或许现在面临着很成熟的响应式布局,再回头梳理响应式布局时,会有一个更深刻的体会。 那什么是响应式呢? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——...

    什么是响应式?

    响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。

    2010年,Ethan Marcotte提出了:http://alistapart.com/article/responsive-web-design

    例子:http://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html

    移动设备逐渐增多,越来越多的人使用移动设备访问互联网,那网页设计师不得不要针对不同大小的移动设备考虑开发呈现的页面。


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

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

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

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

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

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

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

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

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

    mediaqueri.es上面有更多这样的例子。

    这里还有一个测试小工具,可以在一张网页上,同时显示不同分辨率屏幕的测试效果,我推荐安装。

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

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

    首先,在网页代码的头部,加入一行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]-->

    三、不使用绝对宽度

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

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

      width:xxx px;

    只能指定百分比宽度:

      width: xx%;

    或者

      width:auto;

    四、相对大小的字体

    字体也不能使用绝对大小(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)。

    五、流动布局(fluid grid)

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

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

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

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

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

    六、选择加载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);

    七、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)。

    八、图片的自适应(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);

      });

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

    转载自:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

    展开全文
  • 用CSS实现响应式布局

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

    响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局

    要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用

    使用@media 的三种方式

    第一: 直接在CSS文件中使用

    @media 类型 and (条件1) and (条件二)

    {

    css样式

    }

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

    body{

    background-color: red;

    }

    }

    第二:使用@import导入

    @import url("css/moxie.css") all and (max-width:980px);

    第三,也是最常用的:使用link连接,media属性用于设置查询方式

    <link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”/>

    我们只需用到width衍生出的max-width这个属性,定义输出设备中的页面可见区域宽度来控制该改变的样式即可。

    下面是一个简单响应式的布局的html代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>响应式布局</title>
            <meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
            <meta name="format-detection" content="telephone=no,email=no"/>
            <link rel="stylesheet" type="text/css" href="css/mo2.css"/>
        </head>
        <body>
            <div>
                <header id="head">
                    <ul>
                        <li>header1</li>
                        <li>header2</li>
                        <li>header2</li>
                        <li>header2</li>
                        <li>header2</li>
                    </ul>
                    <div>icon</div>
                </header>
                <section id="main">
                    <div class="left">
                        left
                    </div>
                    <div class="center">
                        center
                    </div>
                    <div class="right">
                        right
                    </div>
                </section>
                <footer id="foot">
                    footer
                </footer>
            </div>
        </body>
    </html>

    下边是CSS样式

    *{
        margin: 0px;
        padding: 0px;
        font-family: "微软雅黑";
    }
    #head,
    #foot,
    #main
    {
        height: 100px;
        width: 1200px;
        /*width: 85%;*/
        background-color: goldenrod;
        text-align: center;
        font-size: 48px;
        line-height: 100px;
        margin: 0 auto;
    }
    #head div{
        display: none;
        font-size: 20px;
        height: 30px;
        width: 100px;
        background-color: green;
        float: right;
        line-height: 30px;
        margin-top: 35px;
    }
    #head ul{
        width: 80%;
    }
    #head ul li{
        width: 20%;
        float: left;
        text-align: center;
        list-style: none;font-size: 20px;
    }
    #main{
        height: auto;
        margin: 10px auto;
        overflow: hidden;
    }
    .left,
    .center,
    .right{
        height: 600px;
        line-height: 600px;
        float: left;
        width: 20%;
        background-color: red
    }
    .center{
        width: 60%;
        border-left: 10px solid #FFF;
        border-right: 10px solid #FFF;
        box-sizing: border-box;
    }
    @media only screen and (max-width: 1200px) {
        #head,
        #foot,
        #main{
        width: 100%;
        }
    }
    @media only screen and (max-width: 980px) {
        .right{
            display: none;
        }
        .left{
            width: 30%;
        }
        .center{
            width: 70%;
            border-right: hidden;
        }
    }
    @media only screen and (max-width: 640px) {
        .left,
        .center,
        .right{
            width: 100%;
            display: block;
            height: 200px;
            line-height: 200px;
        }
        .center{
            border: hidden;
            border-top: 10px  solid #FFFFFF;
            border-bottom: 10px solid #FFFFFF;
            height: 600px;
            line-height: 600px;
        }
        #head ul{
            display: none;
        }
        #head div{
            display: block;
        }
    }

    窗口大于1200px时显示的样子

     

     窗口小于1200大于980时,只会被压缩,并不会发生其他变化

    当大于640小于980时,右侧栏隐藏

    当小于640时,导航栏折叠,body三部分竖直排列显示,若窗口持续缩小,不在发生变化,区域被压缩

    好了,布局就这么简单,细节的把握还靠不断地练习。

    展开全文
  • 如何实现响应式布局

    千次阅读 2019-01-09 13:33:11
     所谓响应式布局,就是指同一个网页,在不同的终端上的显示效果不同,但是访问的确实是同一个页面,只是因为浏览器会根据终端的不同(例如屏幕宽度、横竖屏、移动端还是pc端等)选择的渲染方式也不同。相信大家做...

    个人博客文章链接:http://www.huqj.top/article?id=149

    一、什么是响应式布局

        所谓响应式布局,就是指同一个网页,在不同的终端上的显示效果不同,但是访问的确实是同一个页面,只是因为浏览器会根据终端的不同(例如屏幕宽度、横竖屏、移动端还是pc端等)选择的渲染方式也不同。相信大家做前端页面的时候都会有这样的困惑:一个页面在自己电脑上看着好好的,一旦从别的分辨率不同的终端上访问就会变得面目全非,所以不得已只能将页面元素的宽度写死,这样是一种解决办法,但是给移动端带来的浏览体验是很差的。

        百闻不如一见,下面给出两个响应式布局的地址,大家可以用不同终端访问或者调整浏览器的屏幕大小来体验响应式。一个是segmentfault的网站,一个是我自己写的一个简单demo(当然和segment没法比,但是后面会以我做的这个页面讲解如何实现响应式。)

        SegmentFault  响应式布局简单demo

     

    二、如何实现响应式布局

        既然响应式布局如此重要,那么如何实现响应式布局呢?根据我的经验,简单来说就是:先做好PC端的样式,然后使用css中的@media媒媒体查询来适配不同的终端。这里有一个比较好的习惯是将页面栅格化,栅格化的意思就是将页面划分成一块一块的区域,然后不同的终端适配就是将栅格重新排列,这个后面会用实例说明,下面先来看看@media的用法:

        看下面这个例子:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    body {

        backgroundwhite;

    }

     

    @media screen and (max-width800px) {

        body{

            backgroundblack;

        }

    }

        这个简单的css样式,就是媒体查询的最简单用法,它实现的效果是当终端屏幕宽度大于800px的时候,页面背景是白色,当小于800px的时候,背景变为黑色。当然这个没什么意义,但是只要是写在@media中的样式,当查询条件成立的时候就会覆盖正常的样式,从而就可以实现根据终端不同渲染不同的布局。

        因此一般而言设计响应式布局需要遵循以下几点

        ①页面元素宽度不用px作为单位,而是尽量使用百分比。

        ②页面框架之间使用流式布局,也就是用float属性,这样当元素超出屏幕宽度的时候会滑倒下面而不是撑出水平滚动条。

        ③注意图片的大小,尤其是宽度,同样尽量使用百分比

     

    三、实例

        下面结合我所做的一个简单响应式布局页面来做解说。效果图如下:

        PC端:

    image.png

        移动端:

    image.png

        首先是页面的布局:最上方一个div是header,包括了Logo和导航栏,然后下面是左右两大块div,左边的称为main,放置主要内容,右边的称之为right-menu,放置侧边栏,同时right-menu还包括若干个(个数可增减)小div,也就是页面上看到的各个小侧边栏。

        其中main和right-menu是左浮动的,这样使得两大块div可以浮动到同一行。正常css代码:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    .main {    

        width50%;    

        backgroundwhite;    

        floatleft;    

        margin-left11%;    

        padding1rem;    

        font-size1rem;    

    }    

        

    .right-menu {    

        margin-left3%;    

        width25%;    

        floatleft;    

    }

        这里的div宽度和边距都是用百分比来表示的。

        PC端的布局写好了之后,就可以开始考虑媒体查询的样式,就这个例子而言,可以调整成如下样式:

        ①导航栏隐藏,用下拉菜单的方式展示,并且各个导航条目不能放在一行,要分成两行,当然如果导航条目比较多的时候可以多分几行。

        ②右边的侧栏也就是right-menu调整到main的下面去,实现方式也就是将main的浮动属性清除,同时调整main和right-menu的宽度。

        下面是媒体查询的样式:

    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

    /*当设备宽度小于800px的时候切换成移动端的布局*/    

    @media screen and (max-width800px) {    

        .header img {    

            width15%;    

            height15%;    

        }    

        .main {    

            floatnone;    

            width95%;    

            margin0 auto;    

            box-sizing: border-box;    

        }    

        .right-menu {    

            padding0;    

            floatnone;    

            width95%;    

            margin20px auto;    

        }    

        .main img{    

            width40%;    

        }    

        .menu img {    

            width40%;    

        }    

        .nav-bar .m-menu-toggle {    

            displayinline;    

        }    

        .nav-bar ul {    

            displaynone;    

        }    

    }

        这里我还调整了图片的宽度,使得一个图片宽度占据的百分比更大,主要是考虑到图片太小在移动端的浏览体验较差。

     

        以上就是一个简单的响应式布局页面制作过程,其实用Bootstrap组件可以实现通用的响应式布局框架,也不用自己再写媒体查询,不过自己从头做一遍更有助于理解。

        demo的访问地址在上面,下载源码点击这里,github地址:github项目地址

     


     

    参考博客

    https://www.cnblogs.com/dreamsboy/p/5656009.html

    http://www.cnblogs.com/yuanziwen/p/6926561.html 

    标签:css,响应式

    展开全文
  • 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够,缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果,分别是...
  • HTML5+CSS3基础响应式页面布局

    万次阅读 2018-01-08 18:20:46
    此时,一个全新的概念—响应式布局应运而生。它的诞生为我们的移动端布局带来了很大的便利。因此学习响应式页面布局势在必行! 一、响应式页面布局的概念 响应式布局是Ethan Marcotte在2010年5月份提出的一个...
  • 响应式布局是什么?

    千次阅读 2018-07-04 17:33:53
    一、什么是响应式布局?   响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。   响应式布局可以为不同终端的用户提供更加舒适的界面和...
  • 响应式布局的实现方法和原理

    万次阅读 2018-01-02 18:05:26
    昨天我在马海祥博客上跟大家详细的介绍过《什么是响应式网页设计?》,我觉的响应式网页设计不仅仅是一种趋势,还更是一个新的设计解决方案!它有助于解决不同的分辨率和设备(台式电脑,笔记本电脑,平板,手机)...
  • Vue框架设置响应式布局

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

    千次阅读 多人点赞 2019-09-02 11:12:57
    本文主要介绍一些响应式布局容易忽略但又很重要的知识点。 二、视口 移动前端中常说的 viewport (视口)就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小,特别是可以缩放浏览器窗口的情况下。手机端与PC...
  • 到底什么是响应式布局,响应式布局如何去写

    万次阅读 多人点赞 2017-09-08 14:31:23
    即第一个问题--如何解决浏览器的兼容性被我们处理了之后,我们开始学习,如何解决响应式布局,到底什么是响应式布局 其实响应式布局.说的通俗点,就是浏览你写的网站或者说页面的容器不同,大小不同,有人用手机.有人用...
  • React Native 响应式布局实践

    千次阅读 2019-07-05 10:09:11
    作者简介: 张臻,现任前端开发团队 Leader,就职于 NHN Techorus,侧重 Web 技术和互动性的内容开发,主要负责日本 NHN comico 集团下各项目的 Web 前端架构设计与开发,最近兴趣专注于利用 React 和 Redux 的...
  • 移动端基础及响应式布局

    千次阅读 2017-11-29 19:58:17
    2.响应式布局基础 3.响应式布局之流式布局 4.做移动端项目之前的准备 5.响应式布局demo 6.rem响应式布局 7.swiper的使用和轮播图 8.综合案例-微信场景应用1.移动端概述和hybird模式移动端:运行在移动设备上的...
  • CSS3 响应式布局实例

    千次阅读 2018-05-20 16:27:42
    布局实例掌握了响应式设计的核心技术之后,你可以迫不及待想要使用它来构建响应式网站了。也许你会认为响应式设计有点复杂,但事实上,它比你想象的要简单。下面通过构建一个响应式的页面基本布局,让你快速了解如何...
  • 本文主要介绍一些响应式布局容易忽略但又很重要的知识点。 视口 移动前端中常说的 viewport (视口)就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小,特别是可以缩放浏览器窗口的情况下。手机端与PC端...
  • web前端开发之几种布局方式之响应式布局

    万次阅读 多人点赞 2016-10-09 11:09:20
    一理解几种布局的概念 1、静态布局(Static Layout) 即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;  意思就是不管浏览器尺寸具体是多少,网页布局就...
  • html响应式布局,css响应式布局响应式布局入门

    千次阅读 多人点赞 2016-07-25 15:47:33
    html响应式布局,css响应式布局响应式布局入门   &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&...
  • CSS3 响应式布局之响应式图片

    千次阅读 2018-05-20 16:25:47
    如果不指定这些属性值,图像就会按原始尺寸显示。当然,还可以在 CSS 中以像素为单位,设置图像的 width 和 height。在现代浏览器中(包括IE7+)中,只需将图像的 max-width 属性设置为百分数,就可以让图像随着弹性...
  • 响应式布局实现步骤

    千次阅读 2017-12-27 16:45:53
    题外话这两天公司要做一个静态页面展示的优化,...因为领导总说要大胆创新,要敢想敢做,之前工作中的自己太束手束脚,这回也潇洒一把,三天时间,从对响应式一点不知,到现在自己设计页面,自己布局,做出来可以支持
  • 响应式布局实现方法

    千次阅读 2017-09-30 10:16:17
    1,响应式布局:简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 2,实现响应式布局的三种方式  1. CSS3-Media Query(最简单的...
1 2 3 4 5 ... 20
收藏数 72,998
精华内容 29,199
关键字:

响应式布局