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

    2019-09-27 19:08:24
    响应式布局设计 一、布局不变 1、布局不变,模块中内容挤压、拉缩(流式布局) 2、布局不变,模块中内容换行平铺 3、布局不变,模块中内容删除、增加。 二、布局改变 1、布局改变,模块位置改变。 ...

    响应式布局设计

    一、布局不变

    1、布局不变,模块中内容挤压、拉缩(流式布局)

     

    2、布局不变,模块中内容换行平铺

     

    3、布局不变,模块中内容删除、增加。

     

     

    二、布局改变

    1、布局改变,模块位置改变。

     

    2、布局改变,模块展现方式改变。

    3、布局改变,模块数量改变。

     

    很多时候,单一方式的布局响应无法满足理想效果,需要结合多种组合方式,但原则上尽可能时保持简单轻巧,而且同一断点内(发生布局改变的临界点称之为断点)保持统一逻辑。否则页面实现得太过复杂,也会影响整体体验和页面性能。

    转载于:https://www.cnblogs.com/wbxjiayou/p/5157610.html

    展开全文
  • 主要介绍了自适应屏幕的CSS响应式布局设计技巧总结,响应式设计是现在移动端页面开发的热门话题,需要的朋友可以参考下
  • html5响应式布局设计web带图标的选项卡切换效果代码 html5响应式布局设计web带图标的选项卡切换效果代码 html5响应式布局设计web带图标的选项卡切换效果代码
  • 主要介绍了jQuery移动web开发的响应式布局设计,jQuery是JavaScript世界中最具人气的模块或者说类库,需要的朋友可以参考下
  • Web响应式布局设计简介

    千次阅读 2017-12-06 17:57:40
    随着移动互联的到来,市面上的移动终端设备越来越多屏幕尺寸也大小不一。就拿苹果的iPhone来说就有多个不同尺寸的版本,还有iPad也是随着技术的进步...响应式布局设计就是为应对移动互联网多终端设备而提出的。 响应式
    随着移动互联的到来,市面上的移动终端设备越来越多屏幕尺寸也大小不一。就拿苹果的iPhone来说就有多个不同尺寸的版本,还有iPad也是随着技术的进步屏幕大小、分辨率也在变化。更不用说基于开源Android系统的小米、华为、三星等手机和pad了。怎么在网站设计中能够一种设计支持所有终端设备,而不是为每个终端设备制作一套不同的web页面?响应式布局设计就是为应对移动互联网多终端设备而提出的。
    响应式布局是2010年由伊桑.马科特(Ethan Marcotte)提出,英文为Responsive Web Design 简写RWD。目的是一个网站能够兼容多个终端(电脑、手机、Pad等)设备,不需要为每个终端做不同的版本。采用响应式布局设计的网站能够根据显示屏幕的大小而变化,页面的排版布局可以自动进行调整,以适应不同尺寸的屏幕,从而为用户提供更方便的阅读和交互。响应式布局简单的说就是一套设计在pc端和移动端都可以使用,并都能给用户提供方便的服务。不需要根据不同的终端做不同的版本。省钱省力!
    为形象理解响应式布局我们那bootstrap中文网举例,比如在电脑端、大屏幕下访问网站界面如下,一级导航菜单是在页面的最上边,网页内容布满屏幕,屏幕的利用率也比较合理。


    当我们缩小屏幕或者在手机端访问网站的时候,网页对小屏幕自动适用如下,最上边的一级菜单自动变成了下拉菜单。整个网站功能没有变,只是展现形式、交互方式随着屏幕的大小进行了自适应,以更好的满足用户的操作习惯和体验。 


    从上例我们可以看出,响应式布局要做到:
    1、同一个页面在不同大小和分辨率的屏下整个布局要合理,视觉上要舒服;
    2、不同大小的屏幕下同一个页面功能一致,操作方式可能是不同的;
    3、对于不同类型的设备交互方式应该符合设备本身的操作习惯,比如触摸屏和鼠标操作;
    要使一个网站根据屏幕大小进行响应式的自适应,需要做到响应式布局和响应式内容。实现方式:
    1、利用Css和html标签自己写代码实现
    media query能够获取终端分辨率的大小,然后根据大小设定布局和样式。
    @media screen and (min-width:1000px){...} 对大屏幕的PC端页面
    @media screen and (max-width:1000px) and (min-width:768px) {...}        对应中小屏幕的平板端页面
    @media screen and (max-width:768px){...}           对应小屏幕的手机端页面
    2、利用第三方框架,比如bootstrap
    bootstrap生来就具有响应式设计的特性,能够自适应PC、平板电脑、手机等多种终端设备。


    展开全文
  • 响应式布局介绍: 什么是响应式布局 1、服务器根据不同的浏览器用户端,为用户呈现不同的页面效果。 2、可以让一个网站兼容不同分辨率的设备,给用户更好的视觉使用体验。 3、移动互联网催生了响应式布局的诞生...

    响应式布局介绍:

    什么是响应式布局
    1、服务器根据不同的浏览器用户端,为用户呈现不同的页面效果。
    2、可以让一个网站兼容不同分辨率的设备,给用户更好的视觉使用体验。
    3、移动互联网催生了响应式布局的诞生。

    响应式设计优缺点
    优点:

    • 解决了设备之间的差异化展示,让不同的设备达到最优的视觉体验.
      缺点:
    • 兼容性代码多,工作量大,加载速度受影响
    • 对原有网站布局会产生影响,用户判断未必精确.

    响应式设计的原则
    1.移动优先:在设计的初期就考虑页面如何在多终端展示
    2.渐进增强:充分发挥硬件设备的最大功能

    如何实现响应式布局

    1.css3-Media Query:代码简单
    2.借助原生Javascript:主要用于老浏览器上,加载速度慢,不推荐
    3.第三方的开源框架,如bootstrap,可以很好的实现浏览器对响应式的支持

    CSS3-Media Query

    在彻底的了解Media Queries我们需要了解其中的两个重要部分,第一个是媒体类型,第二个是媒体特性。下面的内容我们简单的来了解这两个部分:

    媒体类型(Media Type)

    媒体类型(Media Type)在CSS2中是一个常见的属性,可以通过媒体类型对不同的设备指定不同的样式。
    W3C总共列出了10种媒体类型。如下表所示:

    设备类型
    All 所有设备
    Braille 盲人用点字法触觉回馈设备
    Embossed 盲文打印机
    Handheld 便携设备
    Print 打印用纸或打印预览视图
    Projection 各种投影设备
    Screen 电脑显示器
    Speech 语音或音频合成器
    Tv 电视机类型设备
    Tty 使用固定密度字母栅格的媒介,比如电传打字机和终端

    其中Screen、All和Print为最常见的三种媒体类型。

    媒体类型的引用方法也有多种,常见的有:link标签、@import和CSS3新增的@media几种:
    link方法
    link方法引入媒体类型其实就是在<link>标签引用样式的时候,通过link标签中的media属性来指定不同的媒体类型。如下所示。
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <link rel="stylesheet" href="link.css" media="only screen and (max-width:480px)/*当屏幕分辨率小于等于480px才使用这个样式*/“/>
    @import方法
    @import可以引用样式文件,同样也可以用来引用媒体类型。
    @import引入媒体类型主要有两种方式,一种是在样式中通过@import调用另一个样式文件;另一种方法是在<head></head>标签中的<style></style>中引入,但这种使用方法在IE6~7都不被支持,如样式文件中调用另一个样式文件时,就可以指定对应的媒体类型。
    @import url(reset.css) screen;

    <head>中的<style>标签中引入媒体类型方法。

    1
    2
    3
    
    <style type="text/css">
        @import url(style.css) all;
    </style>
    

    @media方法
    @media是CSS3中新引进的一个特性,被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。
    @media引入媒体类型和@import有点类似也具有两方式。
    (1)在样式文件中引用媒体类型:
    @media screen { 选择器{/*你的样式代码写在这里…*/} }
    (2)使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。

    1
    2
    3
    4
    5
    
    <style type="text/css">
        @media screen{
        选择器{/*你的样式代码写在这里…*/}
    }
    </style>
    

    媒体特性(Media Query,也称作设备特性)

    Mddia Query:Media Type(判断条件) + CSS(符合条件的样式规则)
    W3C共列出了13种CSS3中常用的媒体特性:
    1
    常见的属性(媒体特性):

    • device-width,device-height 屏幕宽高,物理
    • width,height 渲染窗口宽度,可视
    • orientation 设备方向,竖屏和横屏展示的区别对待
    • resolution 设备分辨率,不同于像素

    Media Queries使用方法
    Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果。具体来说,Media Queries的使用方法如下。
    @media 媒体类型 and (媒体特性){你的样式}
    使用Media Queries必须要使用“@media”开头,然后指定媒体类型(也可以称为设备类型),随后是指定媒体特性(也可以称之为设备特性)。
    媒体特性的书写方式和样式的书写方式非常相似,主要分为两个部分,第一个部分指的是媒体特性,第二部分为媒体特性所指定的值,而且这两个部分之间使用冒号分隔。例如:
    (max-width: 480px)
    媒体特性是通过min/max来表示大于等于或小于做为逻辑判断,而不是使用小于(<)和大于(>)这样的符号来判断。

    Media Queries在实际项目中常用的方式。
    1、最大宽度max-width
    “max-width”是媒体特性中最常用的一个特性,其意思是指媒体类型小于或等于指定的宽度时,样式生效。如:

    1
    2
    3
    4
    5
    
    @media screen and (max-width:480px){
     .ads {
       display:none;
      }
    }
    

    上面表示的是:当屏幕小于或等于480px时,页面中的广告区块(.ads)都将被隐藏。
    2、最小宽度min-width
    “min-width”与“max-width”相反,指的是媒体类型大于或等于指定宽度时,样式生效。

    1
    2
    3
    
    @media screen and (min-width:900px){
    .wrapper{width: 980px;}
    }
    

    上面表示的是:当屏幕大于或等于900px时,容器“.wrapper”的宽度为980px。
    3、多个媒体特性使用
    Media Queries可以使用关键词”and”将多个媒体特性结合在一起。
    当屏幕在600px~900px之间时,body的背景色渲染为“#f5f5f5”,如下所示。

    1
    2
    3
    
    @media screen and (min-width:600px) and (max-width:900px){
      body {background-color:#f5f5f5;}
    }
    

    4、设备屏幕的输出宽度Device Width
    在智能设备上,例如iPhone、iPad等,还可以根据屏幕设备的尺寸来设置相应的样式(或者调用相应的样式文件)。同样的,对于屏幕设备同样可以使用“min/max”对应参数,如“min-device-width”或者“max-device-width”。
    <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
    上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px,比如说iPhone上的显示,这里的“max-device-width”所指的是设备的实际分辨率,也就是指可视面积分辨率。
    5、not关键词
    使用关键词“not”是用来排除某种制定的媒体类型,也就是用来排除符合表达式的设备。换句话说,not关键词表示对后面的表达式执行取反操作,如:
    @media not print and (max-width: 1200px){样式代码}
    上面代码表示的是:样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。
    6、only关键词
    only用来指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。
    其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有:支持媒体特性的设备,正常调用样式,此时就当only不存在;表示不支持媒体特性但又支持媒体类型的设备,这样就会不读样式,因为其先会读取only而不是screen;另外不支持Media Queries的浏览器,不论是否支持only,样式都不会被采用。如
    <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />
    在Media Query中如果没有明确指定Media Type,那么其默认为all,如:
    <link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />
    另外在样式中,还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中,指定方式如下所示。
    <link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
    上面代码中style.css样式被用在宽度小于或等于480px的手持设备上,或者被用于屏幕宽度大于或等于960px的设备上。

    到目前为止,CSS3 Media Queries得到了众多浏览器支持,除了IE6-8浏览器不支持之外,在所有现代浏览器中都可以完美支持。Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀。

    Responsive设计

    什么是响应式设计呢?维基百科是这样对响应式作的描述:“Responsive设计简单的称为RWD,是精心提供各种设备都能浏览网页的一种设计方法,RWD能让你的网页在不同的设备中展现不同的设计风格。”从这一点描述来说,RWD不是流体布局,也不是网格布局,而是一种独特的网页设计方法。
    响应式设计要考虑元素布局的秩序,而且还需要做到“有求必应”,那就需要满足以下三个条件:

    • 网站必须建立灵活的网格基础;
    • 引用到网站的图片必须是可伸缩的;
    • 不同的显示风格,需要在Media Queries上写不同的样式。
    Responsive设计常用术语:

    1.流体网格
    流体网格是一个简单的网格系统,这种网格设计参考了流体设计中的网格系统,将每个网格格子使用百分比单位来控制网格大小。这种网格系统最大的好处是让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放。

    2.弹性图片
    弹性图片指的是不给图片设置固定尺寸,而是根据流体网格进行缩放,用于适应各种网格的尺寸。而实现方法是比较简单,一句代码就能搞定的事情。
    img {max-width:100%;}
    为每一个断点提供不同的图片,这是一个比较头痛的事情,因为Media Queries并不能改变图片“src”的属性值,那有没有办分法可以解决呢?可以参考一下下面的解决方法。使用background-image给元素使用背景图片,显示/隐藏父元素,给父元素使用不同的图片,然后通过Media Queries来控制这些图片显示或隐藏。
    来看一个断点解决图片自适应的例子。
    <img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />
    对应的CSS代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    @media (min-device-width:600px){
    img[data-src-600px]{
      content: attr(data-src-600px,url);
      }
    }
    @media (min-device-width:800px){
      img[data-src-800px] {
      content:attr(data-src-800px,url);
      }
    }
    

    请注意:这仅仅是解决响应式图片自适应的一种思路,但这种方案仅仅适配的断点较少。并不太实用,此处仅为扩展同学们的思路。
    3.媒体查询
    媒体查询在CSS3中得到了强大的扩展。使用这个属性可以让你的设计根据用户终端设备适配对应的样式。这也是响应式设计中最为关键的。可以说Responsive设计离开了Medial Queries就失去了他生存的意义。简单的说媒体查询可以根据设备的尺寸,查询出适配的样式。Responsive设计最关注的就是:根据用户的使用设备的当前宽度,你的Web页面将加载一个备用的样式,实现特定的页面风格。
    4.屏幕分辨率
    屏幕分辨简单点说就是用户显示器的分辨率,深一点说,屏幕分辨率指的是用户使用的设备浏览您的Web页面时的显示屏幕的分辨率,比如说智能手机浏览器、移动电脑浏览器、平板电脑浏览器和桌面浏览器的分辨率。Responsive设计利用Media Queries属性针对浏览器使用的分辨率来适配对应的CSS样式。因此屏幕分辨率在Responsive设计中是一个很重要的东西,因为只有知道Web页面要在哪种分辨率下显示何种效果,才能调用对应的样式。
    5.主要断点
    主要断点,在Web开发中是一个新词,但对于Responsive设计中是一个很重要的一部分。简单的描述就是,设备宽度的临界点。在Media Queries中,其中媒体特性“min-width”和“max-width”对应的属性值就是响应式设计中的断点值。简单点说,就是使用主要断点和次要断点,创建媒体查询的条件。而每个断点会对应调用一个样式文件(或者样式代码),如下图所示:
    2
    综合下来,设置断点应把握三个要点:满足主要的断点;有可能的话添加一些别的断点;设置高于1024的桌面断点。

    Responsive布局技巧

    在Responsive布局中,可以毫无保留的丢弃:
    第一, 尽量少用无关紧要的div;
    第二,不要使用内联元素(inline);
    第三,尽量少用JS或flash;
    第四,丢弃没用的绝对定位和浮动样式;
    第五,摒弃任何冗余结构和不使用100%设置。

    Responsive设计——meta标签

    在响应式设计页面中,需要插入meta标签。
    meta标签被称为可视区域meta标签,其使用方法如下。
    <meta name=”viewport” content=”” />
    在content属性中主要包括以下属性值,用来处理可视区域。
    3
    在实际项目中,为了让Responsive设计在智能设备中能显示正常,也就是浏览Web页面适应屏幕的大小,显示在屏幕上,可以通过这个可视区域的meta标签进行重置,告诉他使用设备的宽度为视图的宽度,也就是说禁止其默认的自适应页面的效果,具体设置如下:
    <meta name=”viewport” content=”width=device-width,initial-scale=1.0” />

    另外一点,由于Responsive设计是结合CSS3的Media Queries属性,才能尽显Responsive设计风格,但大家都清楚,在IE6-8中完全是不支持CSS3 Media。
    为了让IE6-8支持Media Queries属性,很有必要在IE9以下的浏览器中加上以下脚本:

    1
    2
    3
    
    <!—[if lt IE9]>      
    <script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>
    <![endif]>
    

    脚本下载地址:
    media-queries.js
    respond.js

    Responsive设计——不同设备的分辨率设置

    下面我们一起来看看CSS3 Meida Queries在标准设备上的运用,大家可以把这些样式加到你的样式文件中,或者单独创建一个名为“responsive.css”文件,并在相应的条件中写上你的样式,让他适合你的设计需求:
    1.1024px显屏

    1
    2
    3
    
    @media screen and (max-width : 1024px) {                    
      /* 样式写在这里 */          
      }
    

    2.800px显屏

    1
    2
    3
    
    @media screen and (max-width : 800px) {              
    /* 样式写在这里 */          
    }
    

    3.640px显屏

    1
    2
    3
    
    @media screen and (max-width : 640px) {              
    /* 样式写在这*/            
    }
    

    4.iPad横板显屏

    1
    2
    
    @media screen and (max-device-width: 1024px) and (orientation: landscape) {/* 样式写在这 */            
    }
    

    5.iPad竖板显屏

    1
    2
    3
    
    @media screen and (max-device-width: 768px) and (orientation: portrait) {
     /* 样式写在这 */            
    }
    

    6.iPhone 和 Smartphones

    1
    2
    3
    
    @media screen and (min-device-width: 320px) and (min-device-width: 480px) { 
        /* 样式写在这 */            
    }
    

    Bootstrap框架-响应式布局

    主要是运用grid(栅格布局),button组件,navbar组件,Dropdown组件等来布局网站。
    twitter的Bootstrap第二版本中就加上了这方面的运用。

    1
    2
    3
    4
    
    @media (max-width: 480px) { ... }              
    @media (max-width: 768px) { ... }              
    @media (min-width: 768px) and (max-width: 980px) { ... }      
    @media (min-width: 1200px) { .. }
    


    原文地址: https://xifengxx.github.io/2016/06/10/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80/
    展开全文
  • 响应式布局设计的三大要点 布局类型 在谈响应式布局前,我们先梳理下网页设计中整体页面排版布局,常见的主要有如下几种类型: 布局实现 采用何种方式实现布局设计,也有不同的方式,这里基于页面的...

     

    响应式布局设计的三大要点


     布局类型 在谈响应式布局前,我们先梳理下网页设计中整体页面排版布局,常见的主要有如下几种类型:
    可切换的固定布局、弹性布局、混合布局都是目前可被采用的响应式布局方式:其中可切换的固定布局的实现成本最低,但拓展性比较差;而弹性布局与混合布局效果具响应性,都是比较理想的响应式布局实现方式。只是对于不同类型的页面排版布局实现响应式设计,需要采用不用的实现方式。通栏、等分结构的适合采用弹性布局方式、而对于非等分的多栏结构往往需要采用混合布局的实现方式。
    布局响应
    对页面进行响应式的设计实现,需要对相同内容进行不同宽度的布局设计,有两种方式:桌面优先(从桌面端开始向下设计);移动优先(从移动端向上设计); 无论基于那种模式的设计,要兼容所有设备,布局响应时不可避免地需要对模块布局做一些变化(发生布局改变的临界点称之为断点), 我们通过JS获取设备的屏幕宽度,来改变网页的布局,这一过程我们可以称之为布局响应屏幕。常见的主要有如下几种方式:
    布局不变,即页面中整体模块布局不发生变化,主要有: 模块中内容:挤压-拉:
    模块中内容:换行-平铺:
    模块中内容:删减-增加:
    布局改变,即页面中的整体模块布局发生变化,主要有: 模块位置变换:
    模块展示方式改变:隐藏-展开:
    模块数量改变:删减-增加:
    很多时候,单一方式的布局响应无法满足理想效果,需要结合多种组合方式,但原则上尽可能时保持简单轻巧,而且保持统一逻辑。否则页面实现得太过复杂,也会影响整体体验和页面性能。

    转载于:https://www.cnblogs.com/king18181753985/p/6358937.html

    展开全文
  • 伟大的网站bootsrape 我创建的示例网站使用了bootsrap和响应式布局设计
  • 响应式布局设计流程

    2020-03-29 13:30:32
    响应式(Responsive web design, RWD),是指一套应用程序用户界面(User Interface)能自动响应不同设备窗口或屏幕尺寸(screen size)并且内容,布局渲染表现良好。 什么是自适应? 自适应设计(AWD),是指一个...
  • 折腾响应式布局设计

    2017-03-06 14:13:56
    不错,我这一周就折腾了这个既是要求瀑布流,又是响应式布局的货。 而且还是在bootstrap框架上折腾的,所以对于响应式布局呢?咱们可以忽略了吗?当然是不行的。 响应式布局概念 Responsive design,意在实现不同...
  • 详解响应式布局设计

    2017-11-13 12:24:00
    响应式布局概念 Responsive design,意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。· 来源:前端开发博客   原文链接:...
  • 响应式页面布局的详细过程 分为以下几个步骤: 1引入样式一个pc端,一个移动端。这里我没有做平板的样式,重点是引入css后,添加的代码段media后面那段话,设置页面宽度值,用以判断加载哪一个css <link rel=...
  • 响应式布局,在此我指的是应用程序在不同屏幕分辨率下的可用性。 对于WinForm应用程序,我们需要明确地根据分辨率来调整控件的大小和重新定位。 虽然在使用WPF时有相关的实践应用,通过使用控件的docking和...
  • HTML的响应式布局设计

    2019-10-05 06:30:10
    响应式布局(Responsive design),意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生...
  • 如果你还没有接触过响应式布局,你得先明白响应式布局和之前用的布局方式稍稍有些不同,因为响应式布局的目的是为了使网页适应不同设备,你需要一段时间的学习来最终实现一个响应式布局的网页。
  • 1. 看一个例子:Mashable的首页: ...描述响应式界面最著名的一句话就是“Content is like water”,成中文 “ 如果将屏幕看作容器,那么内容就像水一样 ” 。 3. 大白话解说: 很久很久以前,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,975
精华内容 1,590
关键字:

响应式布局设计