所以我就在做自适应的时候查了一些资料

首先我发现一个问题：有响应式布局和自适应布局两种布局效果

简单来说，响应式布局就是不同的设备无论大小 布局都自动调整大小 页面布局都一样 可以保证无论什么设备 用户体验是一样的 ；而自适应布局同一页面在不同设备可能呈现不一样的页面效果，比如两张图并排排列变成两张图上下排列

总体来说，现如今响应式布局使用得更多，而不用框架实现自适应其实是有很多方法：

一、用CSS中的媒体查询

其中使用@media也有三种方式

   第一： 直接在CSS文件中使用
           @media 类型 and (条件1) and (条件二)
            {
            css样式
             }
           @media screen and (max-width:980px ) {
                body{
                }
             }
 
    第二：使用@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这个属性，定义输出设备中的页面可见区域宽度来控制该改变的样式即可。
 
 
下面我利用@media screen实现了一个简单响应式页面：
 
    1、先引入 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
         其中

  • width = device-width：宽度等于当前设备的宽度

  • height = device-height：高度等于当前设备的高度

  • initial-scale：初始的缩放比例（默认设置为1.0）

  • minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

  • maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）

  • user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

2、其中html代码如下：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <link rel="stylesheet" href="css/css.css" type="text/css">
  7.      <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
  8.      <meta name="format-detection" content="telephone=no,email=no"/>
  9.     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
  10.     <script type="text/javascript" src="js/js.js"></script>
  11.  </head>
  12.  <body style="height:100%;width:100%">
  13.          <div class="header">
  14.              <img src="img/tittlebg01.png" width="20%">
  15.           <!--    <a href="#/login{{changeCityInfo.linkTxt}}" target="_blank" class="title">武陵山农业大数据平台</a> -->
  16.              <img src="img/tittlebg02.png" width="20%">
  17.          </div>
  18.  
  19.          <section id="main">
  20.                  <div class="left" id="a">
  21.  
  22.                  </div>
  23.  
  24.                  <div class="center" id="b">
  25.                  </div>
  26.  
  27.                  <div class="right" id="c">
  28.                  </div>
  29.  
  30.                  <div class="right" id="d">
  31.                  </div>
  32.          </section>
  33.  
  34.          <div class="space"></div>
  35.  
  36.          <section id="main1">
  37.                      <div class="left" id="a1" >
  38.                      </div>
  39.  
  40.                      <div class="center" id="b1">
  41.                      </div>
  42.  
  43.                      <div class="right" id="c1">
  44.                      </div>
  45.  
  46.                      <div class="right" id="d1">
  47.                      </div>
  48.          </section>
  49.  
  50.          <div class="space"></div>
  51.  
  52.          <section id="main2">
  53.                          <div class="left" id="a2">
  54.                          </div>
  55.  
  56.                          <div class="center" id="b2">
  57.                          </div>
  58.  
  59.                          <div class="right" id="c2">
  60.                          </div>
  61.  
  62.                           <div class="right" id="d2">
  63.                          </div>
  64.          </section>
  65.  
  66.          <div class="space"></div>
  67.  
  68.          <section id="main3">
  69.                          <div class="left" id="a3">
  70.                          </div>
  71.  
  72.                          <div class="center" id="b3">
  73.                          </div>
  74.  
  75.                          <div class="right" id="c3">
  76.                          </div>
  77.  
  78.                          <div class="right" id="d3">
  79.                          </div>
  80.          </section>
  81.  
  82.  </body>
  83.  </html>
      3、css代码如下

  1.   html,body{
  2.          padding:;
  3.          margin:;
  4.          width: 100%;
  5.          height:100%;
  6.          font-size: 16px;
  7.          background:#05283b;
  8.  }
  9.  
  10.  *{
  11.      margin: 0px;
  12.      padding: 0px;
  13.      font-family: "微软雅黑";
  14.  }
  15.  
  16.  .header{
  17.          width:100%;
  18.          height:3%;
  19.          text-align: center;
  20.          font-size:1rem;
  21.          color:white;
  22.  }
  23.  
  24.  section {
  25.      height:22%;
  26.      margin-top:1%;
  27.  }
  28.  
  29.  section div {
  30.      float: left;
  31.      background: #895777;
  32.      height: 100%;
  33.      width: 24%;
  34.      margin-left:0.5%;
  35.      margin-right: 0.5%
  36.  }
  37.  
  38.  @media only screen and (max-width: 1900px) {
  39.      section
  40.      {
  41.      width:100%;
  42.      }
  43.  
  44.  }
  45.  
  46.  @media only screen and (max-width: 1200px) {
  47.      .left,.center{
  48.          width:49%;
  49.          margin-left: 0.5%;
  50.          margin-right: 0.5%;
  51.          margin-top: 1%;
  52.          height: 100%;
  53.      }
  54.      .right{
  55.          width:49%;
  56.          margin-left: 0.5%;
  57.          margin-right: 0.5%;
  58.          margin-top: 1%;
  59.            height: 100%;
  60.      }
  61.  }
  62.  
  63.  @media only screen and (max-width: 980px) {
  64.      section{
  65.          width:100%;
  66.      }
  67.  }
  68.  
  69.  @media only screen and (max-width: 640px) {
  70.      section div{
  71.          width: 100%;
  72.          display: block;
  73.          height:180px;
  74.          line-height:100px;
  75.          margin-top: 3px;
  76.      }
  77.  }

4、我后期简单加了Echarts 就不贴了

5、这是效果图

1920*1080

其他设备：

二、在网上看到过一个设置div的固定高宽比的列子

原博地址：https://blog.csdn.net/qq_37016928/article/details/80558329

博主说，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，即使对于 padding-bottom 和 padding-top 也是如此。在计算 Overflow 时，是将元素的内容区域（即 width / height 对应的区域）和 Padding 区域一起计算的。换句话说，即使将元素的 overflow 设置为 hidden，“溢出”到 Padding 区域的内容也会照常显示。

综上两条所述，可以使用 padding-bottom 来代替 height 来实现高度与宽度成比例的效果。因为div 元素的宽度是其父元素宽度的百分比，所以将 padding-bottom 设置为它的百分比，即 33.98%。同时将其 height 设置为 0 以使元素的“高度”等于 padding-bottom 的值，从而实现需要的效果。

我也用这个方法写了一点，但是还存在一些问题，在一些设备上高宽比会很不一样，如下:

但我觉得div高宽成比例还是比较有意思的一个东西，有时间还想再调调

还有flex，JS获取高度赋值之类的（不过我猜这样echarts可能不好用？没试过），有时间真想再重新写一遍这个自适应，都是上个月写的了。。。

还有一些东西没整理出来 先去工作咯

css实现响应式布局的相关内容的更多相关文章

  1. Responsive Web CSS – 在线响应式布局创建器

    如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...

  2. CSS实现响应式布局

    用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中使 ...

  3. 【css】响应式布局入门【转】

    最近研究响应式设计框架的时候,发现网上很多相关的属性介绍,却很少有系统的入门级使用的文章,我自己整理了一篇入门知识,并没有什么高深的理论,也不牵扯到框架. 目前已经越来越多的站点以及wap站点使用响应 ...

  4. 用CSS实现响应式布局

    响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局 要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用 使用@media 的三种方式 第一: 直接在CSS文件中使用 @ ...

  5. CSS的响应式布局

    响应式布局是什么 它是相对于固定像素大小的网页而言的,顾名思义,响应式布局就是网页能够响应各种各样不同分辨率大小的设备,能够将网页很好的呈献给用户. 如何实现响应式布局? 1.CSS3@media查询 ...

  6. css的响应式布局和动画

    把响应式布局和动画放在一起写是因为他们有个共同点@符号 先讲讲响应式布局@media 响应式布局==曾经==非常的流行,这种布局方式可以做出一也兼容一切设备的页面,但是当页面的功能越来越多,css文件 ...

  7. CSS实现响应式布局(自动拆分几列)

    1.css代码 <style type="text/css"> .container{ margin-top: 10px; } .outerDiv{ float:lef ...

  8. css中响应式布局中样式的代码书写方法

    代码示例:@media only screen and (min-width: 320px){ html { font-size: 8px !important; } .mulu-zi{ positi ...

  9. web页面之响应式布局

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

随机推荐

  1. VoiceXML标识元素及其属性

    VoiceXML 元素 <assign> 给变量赋值. <audio> 播放语音文件. <block> 无用户交互的可执行代码块. <catch> 捕获 ...

  2. nginx配置虚拟主机vhost的方法详解

    Nginx vhost配置,可实现基于ip.端口号.servername的虚拟主机,同时可避免直接修改主配置文件.在nginx下配置虚拟主机vhost非常方便.这篇文章主要介绍了nginx配置虚拟主机 ...

  3. OfficeOpenXml：World、Excel导出导入库

    基础库:EPPlus 根据模版:OfficeOpenXml.Entends

  4. Fiddler和PostMan的使用例子和下载

    一.Fiddler:先下个 1.先讲下Get请求:很简单就一图示意: 然后再讲下POST:举个例子 请求主体的内容: User-Agent: FiddlerContent-Type: applicat ...

  5. nginx----------linux下nginx环境搭建遇到的一些问题汇总（多域名配置，配置文件修改问题）

    一.启动 cd usr/local/nginx/sbin ./nginx 二.重启 更改配置重启nginx kill -HUP 主进程号或进程号文件路径 或者使用 cd /usr/local/ngin ...

  6. 生成并下载txt类型的文件

    public ActionResult Index() { return View(); } /// <summary> /// 获取网页源码,并将其写入txt文件中,下载到本地 /// ...

  7. python全栈第一章

    第一章 Python基础变量定义规则:1.变量名只能是字母数字或者下划线的任意组合2.变量名的第一个字符不能是数字3.关键字不能申明为变量名定义方式:1.驼峰体AgeOfSzp2.下划线隔开Age_o ...

  8. python扩展包的升级

    检查更新:pip list --outdated 更新: pip install --upgrade xxxx

  9. Web基础学习---HTML 第一天

    Web基础学习---HTML 第一天 1 HTML标签 2.CSS Web开发基础HTML好吧离开Python几天...如何学好前端?? 多去看别人的网站.多看.多写.多练,(知乎.36Kr.)多练就 ...

  10. 使用java进行 AES 加密 解密?

    百度百科是这样定义的: 高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准.这个标 ...