精华内容
下载资源
问答
  • 响应式好还是自适应的好
    2020-02-24 21:39:42

    什么是响应式布局?

    响应式布局就是针对不同宽度的设备进行布局和样式的设置,从而适应不同设备的目的,换句话说,也就是一个网站能够兼容多个终端

    什么是自适应式布局?

    自适应式布局其实也就是说需要开发多套界面来适应不同的终端

    响应式布局和自适应布局的区别

    • 自适应布局通过检测视口分辨率来判断当前的设备是:PC 、平板、手机,从而请求服务层,返回不同的页面,
    • 响应式布局通过检测视口分辨率,针对不同客户端展示不同的布局和内容
    • 自适应开发需要开发多套界面,而响应式布局只需要开发一套界面就可以了
    • 自适应对页面做的屏幕适配是在一定范围:比如 PC 端一般要大于 1024 px,手机端一般要小于 768px,而响应式布局是一套页面全部适应
    • 自适应布局如果屏幕太小会发生内容过于拥挤,而响应式布局就是为了解决这个问题而衍生出的概念,它可以自动识别屏幕宽度并做出相应调整的网页设计
    • 总之,响应式布局还是要比自适应布局要好一些,但是自适应布局更加贴切实际,因为你只需要考虑集中状态就可以了而不是像响应式布局需要考虑非常多状态,所以说无论哪种设计都有他们的优缺点,我们要根据项目的需求来选择适合的布局方式
    更多相关内容
  • 响应式布局是什么意思? 响应式布局可以根据不同的浏览设备(PC端,平板,智能手机等)呈现不同的网页布局,同时减少缩放、平移和滚动。 响应式网页设计就是一个网站能够兼容多个终端而不是为每个终端做一个特定的...

    自适应布局

    为不同的设备提供不同的网页,比如专门写一个mobile / iPhone / iPad版本。虽然解决了适配,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个入口,会大大增加架构设计的复杂度。自适应还暴露出一个问题,如果屏幕太小,即使网页能够根据屏幕大小进行适配,但是会感觉在小屏幕上查看,内容过于拥挤

    响应式布局(自适应布局的优化)

    在自适应布局基础上做了系列优化解决了屏幕小内容拥挤的问题,响应式网页的概念是一套适应代码为不同的设备提供不同的网页,换句话说就是一个网站能够兼容多个终端,而不是为了每一个终端做一个特定的版本。就算维护也只是针对那一套代码

    关于自适应布局和响应式布局的区别

    • ①.自适应布局多个网页对应对各个设备响应式布局是一套网页对应多个设备
    • ②.自适应对页面做的屏幕适配是在一定范围:比如pc端一般要大于1024像素,手机端要小于768像素。而响应式布局全部适应
    • ③.自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念,它可以自动识别屏幕宽度并做出相应调整的网页设计

    关于适配的写法

    自适应布局和响应式布局两者都是通过检测视口分辨率来展示对应设计的网页,所以标签内必须加上

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

    响应式布局案例

    用响应式写一个针对不同设备的字体大小变化:

    /*针对pc端*/
    @media screen and (min-width:920px) {
    	body{
    		font-size: 12px;
    	}
    }
    /*针对pad*/
    @media screen and (min-width: 767px) and (max-width:919px) {
    	body{
    		font-size: 24px;
    	}
    }
    /*phone*/
    @media only screen and (max-width: 766px) {
    	body{
    		font-size: 36px;
    	}
    }
    
    

    自适应布局案例

    因为自适应布局是写多套针对不同设备的代码,所以适配的案例无法展示,就跟大家讲一哈自适应的布局,页面的自适应布局分为高度自适应和宽度自适应,来看看宽度自适应的布局,宽度自适应有三种方法,分别是用绝对定位;利用margin,中间模块先渲染;自身浮动。

    <body>        
            <div class="left">200px</div>
            <div class="main">自适应</div>
            <div class="right">200px</div>
    </body>
    
    
    html,body {
        margin: 0;
        height: 100%;
        padding: 0;
        font-size: 30px;
        font-weight: 500;
        text-align: center;
    }
    .main {
        margin: 0 200px;
        height: 100%;
        background-color: pink;
    }
    .left,.right {
        width: 200px;
        height: 100%;
        background-color: greenyellow;
    }
    .left {
        float: left;
    }
    .right {
        float: right;
    }
    
    

    响应式布局的一些技术点纪录:

    • (1)允许网页的宽度自动的调整
    • (2)尽量少使用绝对的宽度,多点百分比
    • (3)相对大小的字体:字体不要使用px写死,最好使用相对大小的em,或者高清方案rem,这个不限制与字体,别的属性也可以这么设置
    • (4)流式布局,float等float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现
    • (5)选择加载css
    <link rel="stylesheet" type="text/css" media="screen and
       (max-device-width: 400px)" href="tinyScreen.css"
       />
    

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

    如果屏幕宽度大于1300像素,则6张图片并排在一行。
    如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行。
    如果屏幕宽度在400像素以下,则6张图片分成三行。

    1.允许网页宽度自动调整

    1、首先,meta标签中,加入一行

     <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]-->
    

    4、流动布局(fluid grid)

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

    .main {
        float: right;
        width: 70%;
      }
    
      .leftBar {
        float: left;
        width: 25%;
      }
    

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

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

    5、选择加载CSS

    "自适应网页设计"的核心,就是CSS3引入的Media Jquery模块。
    它的意思就是,自动探测屏幕宽度,然后加载相应的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)。

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

    处理图片缩放的方法

    简单的解决方法可以使用百分比,但这样不友好,会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了,就缩小。假如图片小了,就原尺寸输出。

     img { width: auto; max-width: 100%; }
    

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

    这只要一行CSS代码:

    img { max-width: 100%;}
    

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

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

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

    img { width: 100%; }
    

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

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

    设计原则?适合什么样的项目?

    向下兼容,移动优先。

    对于非常复杂的网页布局,不适合进行网页自适应的布局,原因之一是实现成本太高,其次就是复杂页面(例如容商网首页,中国企业集群首页等)也不适合移动端的浏览。

    其他的响应式布局的框架?

    Prue框架是Yahoo的一款轻量级的框架,兼容IE7以上,性能好,但是中文文档少,不利于团队开发,没有组件。
    Foundation by ZURB,次于Bootstrap,重量级,362K大小

    Bootstrap优势?

    学习成本低
    是目前最流行的自适应框架
    性能非常好,最基础的文件大小只有149.1k
    bootstrap.min.js 35.1k
    bootstrap.min.css 114k
    中文文档完善,还有全套的视频教程
    有许多组件可以选择,如Bootstrap switch,Sco.js,Flat UI等,便于快速开发

    ps

        <!-- width=device-width :表示宽度是设备屏幕的宽度
        initial-scale=1.0:表示初始的缩放比例
        minimum-scale=0.5:表示最小的缩放比例
        maximum-scale=2.0:表示最大的缩放比例
        user-scalable=yes:表示用户是否可以调整缩放比例 -->
    
    

    ps.设置多种视图宽度

    假如我们要兼容ipad和iphone视图,我们可以这样设置:

    /** iPad **/
    @media only screen and (min-width: 768px) and (max-width: 1024px) {}
    /** iPhone **/
    @media only screen and (min-width: 320px) and (max-width: 767px) {}
    
    

    ps:@media screen 和 @media screen only的区别:

    only用来定某种特别的媒体类型。
    对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。
    对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。

    
    
    
    展开全文
  • 响应式自适应的区别:响应式开发一套界面,通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容;自适应需要开发多套界面,通过检测视口分辨率,来判断当前访问的设备是pc端、平板、...

    响应式与自适应的区别:响应式开发一套界面,通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容;自适应需要开发多套界面,通过检测视口分辨率,来判断当前访问的设备是pc端、平板、手机,从而请求服务层,返回不同的页面。

    响应式布局设置

    1、@media 可以针对不同的屏幕尺寸设置不同的样式。这是响应式布局的核心。如:

            @media screen and (max-width: 960px){
                body{
                  background-color:#FF6699
                }
            }

            @media screen and (max-width: 768px){
                body{
                  background-color:#00FF66;
                }
            }

    2、设置meta标签

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

            device-width在一个设备中是不会变的,他的值跟设备宽度有关,width在不同的布局方案或者不同的容器中展示都有可能不一样,device-width就相当于js的window.screen.width,width相当于js的document.body.clientWidth了。
            initial-scale               初始的缩放比例
            minimum-scale        允许用户缩放到的最小比例
            maximum-scale       允许用户缩放到的最大比例
            user-scalable =0     不允许用户手动缩放

    3、px与自适应

    设置布局视口为理想视口时,1个css像素可以表示成:

            1 CSS像素 = 物理像素/分辨率

    在pc端的布局视口通常情况下为980px,移动端以iphone6为例,分辨率为375 * 667,也就是说布局视口在理想的情况下为375px。比如现在我们有一个750px * 1134px的视觉稿,那么在pc端,一个css像素可以如下计算:

            PC端: 1 CSS像素 = 物理像素/分辨率 = 750 / 980 =0.76 px

            iphone6:1 CSS像素 = 物理像素 /分辨率 = 750 / 375 = 2 px

    在PC端,一个CSS像素可以用0.76个物理像素来表示,而iphone6中 一个CSS像素表示了2个物理像素。此外不同的移动设备分辨率不同,也就是1个CSS像素可以表示的物理像素是不同的,因此如果在css中仅仅通过px作为长度和宽度的单位,造成的结果就是无法通过一套样式,实现各端的自适应。
     

    DPR(设备像素比): 1 DPR = 物理像素/分辨率

    3、百分比布局

            当浏览器的宽度或者高度发生变化时,通过百分比单位,通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式的效果。

            (1)子元素height和width的百分比

    子元素的height或width中使用百分比,是相对于子元素的直接父元素,width相对于父元素的width,height相对于父元素的height。

            (2)top和bottom 、left和right

    子元素的top和bottom设置百分比,则相对于直接非static定位(默认定位)的父元素的高度,同样

    子元素的left和right如果设置百分比,则相对于直接非static定位(默认定位的)父元素的宽度。

            (3)padding和margin

    子元素的padding和margin如果设置百分比,不论是垂直方向或者是水平方向,都相对于直接父亲元素的width,而与父元素的height无关。

            (4)border-radius

    border-radius不一样,如果设置border-radius为百分比,则是相对于自身的宽度

    4、rem布局

    rem是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准,当页面的size发生变化时,只需要改变font-size的值,那么以rem为固定单位的元素的大小也会发生响应的变化。

    5、视口单位

    css3中引入了一个新的单位vw/vh,与视图窗口有关,vw表示相对于视图窗口的宽度,vh表示相对于视图窗口高度,1vw都等于视图宽度的百分之一,除了vw和vh外,还有vmin和vmax两个相关的单位。

    展开全文
  • jQuery响应式自适应代码案例,电脑端、平板端、手机端
  • 办公家具响应式网站手机自适应html静态模板
  • html5响应式图片布局自适应浏览器大小图片布局
  • 这是一款可以根据屏幕宽度自动调整幻灯片宽度的HTML5响应式自适应宽度网站banner焦点图幻灯片代码特效,全屏banner幻灯片宽度始终占据整个视口的宽度,演示网页有两个效果。
  • html5响应式自适应医疗设备企业网站html静态模板
  • 如何判断是响应式布局还是自适应布局呢?自适应是为了解决如何才能在不同大小的设备上呈现同样的网页,让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整网页内容大小,但是无论怎样,他们主体的内容和...

    在移动站建设和优化中,我们经常会听到响应式和自适应这两个名词,这两者之间有什么区别呢?如何判断是响应式布局还是自适应布局呢?

    自适应是为了解决如何才能在不同大小的设备上呈现同样的网页,让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整网页内容大小,但是无论怎样,他们主体的内容和布局是没有变的。自适应还是暴露出一个问题,如果屏幕太小,即使网页能够根据屏幕大小进行适配,但是会感觉在小屏幕上查看,内容过于拥挤。

    响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计,布局和展示的内容可能会有所变动。

    上面所说的,大家可能未必能够理解,下面结合几个例子,再来理解上面的话,相信大家能够明白。

    2111bfc10bd2aea18afe68903c3b3408.png

    在这个网站上你可以直接的体验自适应、响应式、液态、静态几种布局的不同之处,我们来体验一下自适应和响应式。

    04b3de2438a2a9b24db9d231b15d126c.png

    自适应

    aac783b1a0bb2a41d640e4652b682391.png

    响应式

    我们可以看出,在相同宽度的情况下,响应式的布局和内容进行了调整,自适应则没有。我们再以多尺寸浏览插件来看一下小屏幕上网页内容的显示效果,我们仍然使用相同的尺寸来看两者的效果:

    2db7dd442f7ba5ee5ccdf1c08e001dfd.png

    自适应

    3351562f5e070de93029cceaea7f07dd.png

    响应式

    可以看出,响应式的布局和内容进行了调整。大家可以自己去体验一番,开启多尺寸浏览插件,根据宽度来看效果,这个更直观明了。

    展开全文
  • 本篇文章主要介绍了HTML5响应式自适应)网页设计的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 问题在响应式布局中,我们应该小心对待iframe元素,iframe元素的width和height属性设置了其宽度和高度,但是当包含块的宽度或高度小于iframe的宽度或高度时,会出现iframe元素溢出的现象: 这样溢出的iframe会破坏...
  • 模板名称: 响应式主题博客新闻自适应手机端 织梦模板 模板介绍: 精心设计,全力打造,自适应式结构,适合于PC电脑、平板电脑以及手机访问的一套CMS资讯型织梦系统博客主题模板, 人气推荐等模块一应俱全,内置头...
  • 响应式自适应设计,同一个后台,数据即时同步,简单适用! 原创设计、手工书写DIV+CSS, 完美兼容IE7+、Firefox、Chrome、360浏览器等;主流浏览器; 页面简洁简单,容易管理,DEDE内核都可以使用;附带测试数据!
  • 响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。 自适应布局给了你更多设计的空间,因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较...
  • 响应式布局和自适应

    千次阅读 2021-06-13 19:06:26
    响应式布局和自适应 写网页时,经常要求要适配不同屏幕,要求可以在大屏幕,ipad,手机上可以显示正常。对于公司的官网这是很重要的。那么,这就涉及到了响应式布局和自适应。 文章目录响应式布局和自适应前言一、...
  • 蓝科企业响应式模板 绿色环保LED灯网站源码PHP h5手机自适应珠宝首饰网站源码 PHP中英双语伪静态html5响应式模板 手机自适应
  • 一套程序在多种终端设备展示,页面布局有2种:自适应布局和响应式布局。这二者有啥区别呢? 自适应布局,就是页面在多种终端设备,不同分辨率下,能够正常展示,不会出现错位,严重变形等,但页面布局不变。 而响应...
  • PbootCMS内核开发的营销型网站模板,响应式端同一个后台,数据即时同步,简单适用!附带测试数据! 完美的seo,所有页面均都能完全自定义标题/关键词描述,PHP程序,安全、稳定、快速; 后台:域名/admin.php 账号:...
  • 饮食食品美食日用品通用营销型网站织梦响应式模板(自适应手机)
  • 学了前端一段时间了,发现大家都搅浑了自适应布局和响应式布局的差别。现在我来和大家说下它们的不同: 自适应的体验 http://m.ctrip.com/html5/响应式的体验 http://segmentfault.com/    整理了自己查阅的...
  • 响应式布局能使网站在手机和平板电脑上有更的浏览体验,也就就是说一个网站能后兼容多个终端,而不是为了每一个终端做一个特定的版本。 什么是自适应布局: 自适应布局就是能忘了使网页自适应的显示在不同大小终端...
  • 主要介绍了自适应屏幕的CSS响应式布局设计技巧总结,响应式设计是现在移动端页面开发的热门话题,需要的朋友可以参考下
  • 响应式布局与自适应布局的区别
  • html5响应式表格插件设置自适应表格代码
  • 浅谈响应式开发与自适应布局!

    千次阅读 2018-05-02 23:41:49
    谈到响应式,大家不自觉的会想到什么? 首先映入眼帘的便是随着网页宽度变化而网页内容呈现出不同内容的效果!那么由来是什么呢? 2009时间段,互联网发生了一件天大的事情! 那就是在北京时间2009年6月9日凌晨2...
  • HTML5 响应式自适应 PAD 手机客户端等移动设备,采用 CSS3 布局设计交互性很强,三款配色及全站宽屏、窄屏可切换! 本模板有三款配色及全站宽屏、窄屏可切换(共六种选择),会员登录后可自行选择喜欢的样式。 本...
  • 设备的划分情况: 小于768的为超小屏幕(手机) 768~992之间的为小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 5.2响应式布局容器 响应式需要一个父级做为布局容器,来...

空空如也

空空如也

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

响应式好还是自适应的好