精华内容
下载资源
问答
  • 办公家具响应式网站手机自适应html静态模板
  • 响应式布局和自适应

    2021-06-13 19:06:26
    响应式布局和自适应 写网页时,经常要求要适配不同屏幕,要求可以在大屏幕,ipad,手机上可以显示正常。对于公司的官网这是很重要的。那么,这就涉及到了响应式布局和自适应。 文章目录响应式布局和自适应前言一、...

    响应式布局和自适应

    写网页时,经常要求要适配不同屏幕,要求可以在大屏幕,ipad,手机上可以显示正常。对于公司的官网这是很重要的。那么,这就涉及到了响应式布局和自适应。



    前言

    如果对网站的适应方面要求多的话,例如移动端的排版要求变动比较大,可以做成两个版本:pc版本和h5版本(移动端),可以参考京东。
    pc版本显示如下(jd.com):

    在这里插入图片描述
    当你切换到移动端显示的时候,如下图:
    在这里插入图片描述

    今天,讲讲怎么做适应

    一、响应式布局

    在这里插入图片描述

    像这种,随着屏幕宽度做出不同的布局的,就是响应式布局,即响应不同屏幕大小的布局。
    响应式屏幕的断点有以下几种:

    Breakpoint Class infix Dimensions
    X-Samll(超小屏幕) None <576px
    Samll(小屏幕) sm >=576px
    Medium(平板) md >=768px
    Large(电脑小屏幕) lg >=992px
    Extra large(电脑大屏幕) xl >=1200px
    Extra extra large(电脑超大屏幕) xxl >=1400px

    在这里插入图片描述
    根据需求,通过媒体查询不同屏幕宽度时,对界面样式的宽高,边距等进行改动

    //以屏幕最小值作为媒体查询时:
    // Extra small devices (portrait phones, less than 576px)
    // No media query for `xs` since this is the default in Bootstrap
    
    // Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) { ... }
    
    // Medium devices (tablets, 768px and up)
    @media (min-width: 768px) { ... }
    
    // Large devices (desktops, 992px and up)
    @media (min-width: 992px) { ... }
    
    // Extra large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { ... }
    
    //以屏幕最大值作为媒体查询时:
    // Extra small devices (portrait phones, less than 576px)
    @media (max-width: 575.98px) { ... }
    
    // Small devices (landscape phones, less than 768px)
    @media (max-width: 767.98px) { ... }
    
    // Medium devices (tablets, less than 992px)
    @media (max-width: 991.98px) { ... }
    
    // Large devices (desktops, less than 1200px)
    @media (max-width: 1199.98px) { ... }
    
    // Extra large devices (large desktops)
    // No media query since the extra-large breakpoint has no upper bound on its width
    

    利用Boostrap的Display的样式,对于不同屏幕时的dom元素可以进行隐藏。

    //例如中等屏幕时,隐藏;其他屏幕时,显示
    .d-md-none .d-lg-block
    

    还可以使用里面的grid布局,针对不同屏幕表现不同的宽

    <div class="container">
      <div class="row justify-content-md-center">
        <div class="col col-lg-2">
          1 of 3
        </div>
        <div class="col-md-auto">
          Variable width content
        </div>
        <div class="col col-lg-2">
          3 of 3
        </div>
      </div>
      <div class="row">
        <div class="col">
          1 of 3
        </div>
        <div class="col-md-auto">
          Variable width content
        </div>
        <div class="col col-lg-2">
          3 of 3
        </div>
      </div>
    </div>
    

    综上,响应式布局用boostrap的css文件样式就够用了

    二、自适应

    当在移动端显示时,要求适应不同的手机屏幕,一般叫做自适应。可以说自适应是响应式布局的超集。但是两者的偏重点有所不同,自适应多指移动端,响应式多种pc端。
    当pc端的版式宽高与手机端的版式宽高差别较大时,频繁的媒体查询更改样式会特别繁琐,相当于把所有元素的宽高都改了一遍。这时何不做一个h5版本的自适应网页呢?

    根字体大小rem

    rem就是html的字体大小,假设所有元素的宽高根据rem来设定,那么只要改变rem的大小,就可以实现全部元素的等比缩放。

    方案一:postcss-px2rem+setRem()

    PostCSS 的一个插件,可以从像素单位生成 rem 单位

    //使用postcss-plugin-px2rem,推荐
    npm i --save postcss-plugin-px2rem
    //vue-cli3的配置文件中
      css: {
        loaderOptions: {
          postcss: {
            plugins: [
                require('postcss-plugin-px2rem')({  //配置postcss-plugin-px2rem适配
                    rootValue:75, //换算基数,设置根字体75px,可以设为设计稿的十分之一(假设750px)。这样子写页面样式就直接写设计稿的宽高
                    unitPrecision: 5, //允许REM单位增长到的十进制数字。
                    //propWhiteList: [],  //默认值是一个空数组,这意味着禁用白名单并启用所有属性。
                    // propBlackList: [], //黑名单
                    exclude: /(node_module)/,  //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
                    // selectorBlackList: [], //要忽略并保留为px的选择器
                    // ignoreIdentifier: false,  //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。
                    // replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。
                    mediaQuery: false,  //(布尔值)允许在媒体查询中转换px。
                    // minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
                }),
            ]
        }
        }
    
      },
    
    //使用postcss-px2rem,这个插件没有排除node_module的选项
    npm i postcss-px2rem --save -dev
    //vue-cli3的配置文件中
       postcss: {
          plugins: [
            //假如设计图给的宽度是750,我们通常就会把remUnit设置为75,这样我们写样式时,可以直接按照设计图标注的宽高来1:1还原开发。
            require('postcss-px2rem')({
              remUnit: 75
            })
          ]
        }
    
    

    配合js文件,动态计算:

    // REM是根据根结点来计算各个子节点的值,所以根结点也要做响应式变化。utils/setRem.js
    export default function setRem() {
     const baseWidth = 750;//设计稿大小
      const dpr = window.devicePixelRatio;
      const currentWidth = document.documentElement.clientWidth;
      // 屏幕宽度大于780px,不再放大字体
     currentWidth = currentWidth < 780 ? currentWidth : 780;
      let remSize = 0;
      let scale = 0;
      scale = currentWidth / baseWidth;
      //当我们在iphone6上显示时,满屏宽度是375px,即currentWidth是375px,最终得到的rem是37.5px。所以页面元素进行收缩
      remSize = baseWidth / 10;
      remSize = remSize * scale;
      document.documentElement.style.fontSize = remSize + 'px';
      document.documentElement.setAttribute('data-dpr', `${dpr}`);
    }
    setRem()
    window.addEventListener("resize", setRem, false);//窗口大小发生改变
    window.addEventListener("orientationchange", setRem, false); //移动端翻转屏幕
    

    然后在main.js引入即可

    方案二:flexible和 postcss-px2rem

    postcss-px2rem可以换成postcss-plugin-px2rem
    点击此处查看详情flexible和 postcss-px2rem

    npm install lib-flexible --save-dev
    npm i --save postcss-plugin-px2rem
    

    可以看到在iphone6/7/8 375x667下,lib-flexible插件设置的根字体大小是它的物理像素750、10=75,然后缩小一半来适配逻辑像素375
    在这里插入图片描述
    方案三:vw适配
    这种方案不需要额外的js,更加简单明了。更多人使用。
    postcss-px-to-viewport

          postcss:{
            plugins:[
              require('postcss-px-to-viewport')({
                unitToConvert: 'px',//(String) 需要转换的单位,默认为"px"
              viewportWidth: 375, // (Number) 设计稿的视口宽度,一般是750
              unitPrecision: 3, //  (Number) 单位转换后保留的精度(很多时候无法整除)
              viewportUnit: 'vw', // (String) 希望使用的视口单位
              selectorBlackList: ['.ignore', '.hairlines'], //需要忽略的CSS选择器
              minPixelValue: 1, // (Number) 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
              mediaQuery: true, // (Boolean) 媒体查询里的单位是否需要转换单位
              exclude:[/^node_modules$/],// (Array or Regexp) 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
              //include:/\/src\/mobile\//  
              landscapeUnit:'vw' , //横屏时使用的单位
              landscapeWidth:750  //横屏时使用的视口宽度
              })
            ]
            
          }
    

    总结

    本文讲解了响应式布局和移动端自适应,其中移动端自适应有三种方案,自行根据需要添加

    展开全文
  • 响应式网站模板自适应带后台,织梦系统,操作简单。适用于各个行业
  • 响应式设计与自适应设计

    千次阅读 2016-10-31 17:26:24
    响应式设计与自适应设计 相信从事前端页面设计的人都知道,页面呈现的效果及用户体验是非常重要的。当今社会移动设备的使用已超过了pc端,面对不同分辨率的设备,怎样做到页面体验的效果一样呢?这就成了最头疼的...

    响应式设计与自适应设计

    相信从事前端页面设计的人都知道,页面呈现的效果及用户体验是非常重要的。当今社会移动设备的使用已超过了pc端,面对不同分辨率的设备,怎样做到页面体验的效果一样呢?这就成了最头疼的事情。

    下面我们来看看响应式设计与自适应设计两者用法:

    响应式Web设计(Responsive Web Design) :主要利用CSS3媒介查询(Media QueryViewport解决问题。通过媒介查询的设置,根据屏幕宽度、屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的视觉风格。

    具体使用方法如下

    1、meta标签viewport属性

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0”/>

    视窗宽度width=device-width设备宽度

    视窗缩放initial-scale=1不可缩放状态   maximum-scale=1不可放大

    user-scalable=0 是否允许用户调整缩放,如果设置为yes则允许用户对其改变反之则为no如果设置no,那么minimum-scalemaximum-scale都将忽略,用为根本不可能缩放。所有缩放的值都必须在0.01-10范围之内。

    2、media query(两种方式)

    a:通过link标签

    <link rel=”stylesheet” type=”text/css” media=”screen and(max-width: 600px)” href=”style1.css”/>

    示例代码代表当前屏幕宽度小于600px的时候,加载style1.css文件来渲染页面。

    bCSS直接设置

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

    /* 具体CSS属性设置 */

    }

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

    3

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

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

    4、缺点

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

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

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

     

    自适应网页设计(Adaptive Web Design):指能使网页自适应显示在不同大小终端设备上网页设计及技术。

    主要注意的问题如下

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

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=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、不使用绝对宽度由于网页会根据屏幕宽度调整布局,不能使用width: xxx px具体的像素值,使用百分比width:xxx %或者width:auto

    3、相对大小的字体字体也不使用绝对大小px,而只能使用相对大小(em)设置body字体为100%,即字体大小是页面默认大小100%也是16px例如p{ font-size: 1.5em; }p的大小默认大小的1.5倍24px( 24/16=1.5 ))

    4、流动布局各个区块的位置都是浮动的,不是固定不变的

    .left {

    float: left;

    width: 20%;

    }

    .right {

    float: right;

    width: 75%;

    }

    Float的好处是,如果宽度太小放不下两个元素,后面的元素会自动滚到前面元素的下方,不会再水平方向溢出,避免了水平滚动条的出现。:绝对定位(position: absolute使用,也要非常小心。

    5、图片的自适应

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

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

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

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

    img { width: 100%; height:auto}

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

    Img { -ms-interpolation-mode: bicubic }

    或者Ethan MarcotteimgSizer.js

    addLoadEvent(function(){

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

    imgSizer.collate(imgs);

    })

     

    注:自适应网页设计的核心,就是CSS3引入的Media Query模块,与响应式布局设计的使用一样。

    两者区别与选择:

    理论上说,响应式布局在任何情况下都比自适应布局好一些,但在某些情况下自适应布局更切实际。

     自适应布局可以让你的设计更加可控,因为你只需要考虑了了几种状态就万事大吉了。但在响应式布局中你可能需要面对非常多状态——是的,大部分状态之间的区别很小,但它们又的确是不同的——这样一来就很难确切搞清你的设计会是什么样。同时这也带来了测试上的难题,你很难有绝对的把握预测到它会怎样。换个角度说,这也是响应式布局的魅力所在。通过允许表面上的不确定因素存在,你可以获得更高层次上的确定。虽然你无法在精确到像素级别准确预知你的设计如何在943px×684px视觉区域汇中展示,但你能确定的是它们一定能展示的很好——不管是表层特征还是布局结构都有条不紊。

         自适应布局有它自己的优势,因为它们实施起来代价更低,测试更容易,这往往让他们成为更切实际的解决方案。自适应布局可以看做响应式布局的“穷兄弟”,在资源有限的情况下就可以让它出马。特别是改进现有网站的时候尤其奏效,因为全部重写代码在这时并不可行。这种案例中,采用自适应布局是一个不错的出发点。

    其实无论是哪种设计理念都是各有优缺的,还是要从个人实际去求出发去选择!

    展开全文
  • 响应式布局与自适应布局的区别

    1.什么是响应式布局和自适应式布局

    响应式布局

    响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端,而不是为了每一个终端做一个特定的版本。
    在这里插入图片描述

    自适应布局

    自适应布局就是指能忘了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术,它需要开发多套界面来适应不同的终端。
    在这里插入图片描述

    2.响应式布局和自适应式布局区别

    ①自适应布局通过检测视口分辨率,来判断当前访问的设备是:pc端、平板、手机,从而请求服务层,返回不同的页面;响应式布局通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容。
    ②自适应布局需要开发多套界面,而响应式布局只需要开发一套界面就可以了。
    ③自适应对页面做的屏幕适配是在一定范围:比如pc端一般要大于1024像素,手机端要小于768像素。而响应式布局是一套页面全部适应。
    ④自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念,它可以自动识别屏幕宽度并做出相应调整的网页设计。
    总之,响应式布局还是要比自适应布局要好一点,但是自适应布局更加贴切实际,因为你只需要考虑几种状态就可以了而不是像响应式布局需要考虑非常多状态。所以的说无论哪种设计都有它们各自的特点,我们要根据项目的需求来选择适合的布局方式。

    展开全文
  • html5响应式图片布局自适应浏览器大小图片布局
  • 响应式网络公司自适应企业网站html模板源码
  • 什么是响应式布局?...响应式布局和自适应布局的区别 自适应布局通过检测视口分辨率来判断当前的设备是:PC 、平板、手机,从而请求服务层,返回不同的页面, 响应式布局通过检测视口分辨率,针对不...

    什么是响应式布局?

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

    什么是自适应式布局?

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

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

    • 自适应布局通过检测视口分辨率来判断当前的设备是:PC 、平板、手机,从而请求服务层,返回不同的页面,
    • 响应式布局通过检测视口分辨率,针对不同客户端展示不同的布局和内容
    • 自适应开发需要开发多套界面,而响应式布局只需要开发一套界面就可以了
    • 自适应对页面做的屏幕适配是在一定范围:比如 PC 端一般要大于 1024 px,手机端一般要小于 768px,而响应式布局是一套页面全部适应
    • 自适应布局如果屏幕太小会发生内容过于拥挤,而响应式布局就是为了解决这个问题而衍生出的概念,它可以自动识别屏幕宽度并做出相应调整的网页设计
    • 总之,响应式布局还是要比自适应布局要好一些,但是自适应布局更加贴切实际,因为你只需要考虑集中状态就可以了而不是像响应式布局需要考虑非常多状态,所以说无论哪种设计都有他们的优缺点,我们要根据项目的需求来选择适合的布局方式
    展开全文
  • 该技巧是一个简单的响应式字体示例。它将演示如何使用新的尺寸单元REM。REM的意思是根EM(Root EM)。如果使用EM单元,意味着字体尺寸与根元素字体尺寸有关,而不是父元素字体。   准备工作 在进一步讨论之前,...
  • 通过响应式设计能使网站在手机和平板电脑上有更的浏览阅读体验。换句话说就是一个网站能够兼容多个终端,而不是为了每一个终端做一个特定的版本。 2.什么是自适应式布局: 自适应布局就是指能忘了使网页自适应的...
  • 手机二三级导航,手机导航,响应式导航,自适应导航,下拉导航
  • 响应式RWD和自适应

    千次阅读 2016-07-26 22:05:25
    一、通俗的说,自适应网页设计也是响应式网页设计,响应式网页设计也是自适应网页设计。但是真正的细分起来,自适应只是响应式的一个子集,指网页中整体大图的自适应或者banner的自适应响应式网页设计优势:流体...
  • 响应式布局与自适应式布局有什么不同 很多人经常会对响应式布局和自适应式布局产生混淆,今天将为大家介绍这两者...通过响应式设计能使网站在手机和平板电脑上有更的浏览阅读体验。换句话说就是一个网站能够兼容多...
  • 响应式布局和自适应布局详解   注:响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。 自适应布局给了你更多设计的空间,因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百...
  • 1.什么是响应式布局和自适应布局 响应式布局 响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更的浏览阅读体验。换句话说就是一个网站能够兼容多个...
  • 注:响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。 自适应布局给了你更多设计的空间,因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态...
  • UI设计中如何做响应式设计与自适应设计?由于科技在不断的发展,小伙伴们上网就不单单只依靠台式电脑了,还有平板电脑笔记本电脑都是可供大家选择的。面对不同的屏幕分辨率网站是如何进行适配的呢?今天AAA教育胡老师...
  • 蓝科企业响应式模板 绿色环保LED灯网站源码PHP h5手机自适应珠宝首饰网站源码 PHP中英双语伪静态html5响应式模板 手机自适应
  • 通过响应式设计能使页面在手机、平板、PC端上有更的浏览阅读体验,不再是很繁琐的开发模式。在最开始没有响应式自适应布局时,通常都是pc端上浏览时很正常,但是在移动端上访问就直接是一整个页...
  • 是什么: 什么是自适应布局:同一张网页自动适应不同大小的屏幕,...所以响应式布局是自适应布局的改进,布局和展示的内容可能会有所变动。例如:网页在屏显300~600~900~1200四个阶段的布局与内容(https://mediaq...
  • 响应式网页与自适应网页的区别

    千次阅读 2016-11-25 17:10:19
    通俗的说,自适应网页设计也是响应式网页设计,响应式网页设计也是自适应网页设计。但是真正的细分起来,自适应只是响应式的一个子集,指网页中整体大图的自适应或者banner的自适应。(响应式设计可以一个网站兼容多...
  • 响应式布局与自适应布局的区别

    千次阅读 2019-05-14 15:51:56
    一直都对响应式布局与自适应布局十分混淆,近期也一直在...响应式布局能使网站在手机和平板电脑上有更的浏览体验,也就就是说一个网站能后兼容多个终端,而不是为了每一个终端做一个特定的版本。 什么是自适应布...
  • 响应式布局能使网站在手机和平板电脑上有更的浏览体验,也就就是说一个网站能后兼容多个终端,而不是为了每一个终端做一个特定的版本。 什么是自适应布局: 自适应布局就是能忘了使网页自适应的显示在不同大小终端...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,207
精华内容 12,082
关键字:

响应式好还是自适应的好