【一】基础知识

一、概念区别

自适应是最早出现的，后面才有了响应式。响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。
响应式——同一个页面用不同设备（电脑、平板、手机）去访问此页面，最后看到的布局和内容都有很大不同。
自适应——同一个页面用不同设备（电脑、平板、手机）去访问此页面，最后看到的页面内容和布局基本上还是一样的，就是尺寸略有不同。

HTML5响应式自适应产品展示网站织梦模板 网页自适应和响应式_响应式

       

HTML5响应式自适应产品展示网站织梦模板 网页自适应和响应式_响应式_02

 

 

 

 

【二】实现响应式的方式

一、使用媒体查询(Media Query) 结合 rem

rem是css3新出的单位，是指相对于根元素的字体大小的单位。一般设置在html,body。

先在<head>标签里加入这个meta标签(设置设备按照一比一的尺寸进行显示，并且禁止用户缩放页面):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
其次是媒体查询，这个大家应该都知道，这个是响应式最重要的部分。

@media screen and (min-width:1000px){html,body{font-size:14px;}} // 大于1000px，对应PC端页面
@media screen and (max-width:1000px) and (min-width:768px){html,body{font-size:13px;}} //在小于1000px和大于768px之间，对应平板端页面
@media screen and (max-width:768px){html,body{font-size:12px;}} // 小于768px，对应手机端页面

rem会根据我们在html,body设置的字体单位进行自动缩放.
推荐100px等于1rem,这样做的好处有两点:
第一,谷歌浏览器的默认字体是12px,小于就失效,如果1rem等于10px的话是没有任何效果的.第二,容易换算,例如我们15px的话,就写0.15rem.

还可以使用js自动计算rem,这样可以不用到媒体查询

// 基准大小 相当于窗口缩放到设计稿的尺寸时body的字体大小 这里设置100px 方便计算
  const baseSize = 100
  // 设置 rem 函数
  function setRem() {
    // 当前页面宽度相对于1280宽的缩放比例，可根据自己需要修改。1280是设计稿的宽度
    const scale = document.documentElement.clientWidth / 1280;
    let autoWidth = Math.round((baseSize * Math.min(scale, 2)));
    //判断页面缩放到小于99px的字体时 就不再缩小 防止内容溢出
    if (Math.round((baseSize * Math.min(scale, 2))) <= 99) {
      autoWidth = 99;
    }
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = autoWidth + 'px'
  }
  // 初始化
  setRem()
  // 改变窗口大小时重新设置 rem
  window.onresize = function () {
    setRem()
  }

二、使用插件bootstrap

栅格化布局，本例利用bootstarp的栅格系统

在class加上bootstrap独有的Class前缀,就可以使用bootstrap了,当然你得先引入bootstrap的插件.示例:
<div class="col-xs-6 col-sm-3"></div>

HTML5响应式自适应产品展示网站织梦模板 网页自适应和响应式_响应式_03

 

 

三、使用弹性布局flex

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。
.box{  display: flex;
}
行内元素也可以使用 Flex 布局。
.box{  display: inline-flex;
}