css实现响应式布局的相关内容

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

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

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

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

一、用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属性用于设置查询方式

下面我利用@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代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <link rel="stylesheet" href="css/css.css" type="text/css">

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

     <meta name="format-detection" content="telephone=no,email=no"/>

    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>

    <script type="text/javascript" src="js/js.js"></script>

 </head>

 <body style="height:100%;width:100%">

         <div class="header">

             <img src="img/tittlebg01.png" width="20%">

          <!--    <a href="#/login{{changeCityInfo.linkTxt}}" target="_blank" class="title">武陵山农业大数据平台</a> -->

             <img src="img/tittlebg02.png" width="20%">

         </div>

         <section id="main">

                 <div class="left" id="a">

                 </div>

                 <div class="center" id="b">

                 </div>

                 <div class="right" id="c">

                 </div>

                 <div class="right" id="d">

                 </div>

         </section>

         <div class="space"></div>

         <section id="main1">

                     <div class="left" id="a1" >

                     </div>

                     <div class="center" id="b1">

                     </div>

                     <div class="right" id="c1">

                     </div>

                     <div class="right" id="d1">

                     </div>

         </section>

         <div class="space"></div>

         <section id="main2">

                         <div class="left" id="a2">

                         </div>

                         <div class="center" id="b2">

                         </div>

                         <div class="right" id="c2">

                         </div>

                          <div class="right" id="d2">

                         </div>

         </section>

         <div class="space"></div>

         <section id="main3">

                         <div class="left" id="a3">

                         </div>

                         <div class="center" id="b3">

                         </div>

                         <div class="right" id="c3">

                         </div>

                         <div class="right" id="d3">

                         </div>

         </section>

 </body>

 </html>

3、css代码如下

  html,body{

         padding:;

         margin:;

         width: 100%;

         height:100%;

         font-size: 16px;

         background:#05283b;

 }

 *{

     margin: 0px;

     padding: 0px;

     font-family: "微软雅黑";

 }

 .header{

         width:100%;

         height:3%;

         text-align: center;

         font-size:1rem;

         color:white;

 }

 section {

     height:22%;

     margin-top:1%;

 }

 section div {

     float: left;

     background: #895777;

     height: 100%;

     width: 24%;

     margin-left:0.5%;

     margin-right: 0.5%

 }

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

     section

     {

     width:100%;

     }

 }

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

     .left,.center{

         width:49%;

         margin-left: 0.5%;

         margin-right: 0.5%;

         margin-top: 1%;

         height: 100%;

     }

     .right{

         width:49%;

         margin-left: 0.5%;

         margin-right: 0.5%;

         margin-top: 1%;

           height: 100%;

     }

 }

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

     section{

         width:100%;

     }

 }

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

     section div{

         width: 100%;

         display: block;

         height:180px;

         line-height:100px;

         margin-top: 3px;

     }

 }

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实现响应式布局的相关内容的更多相关文章

Responsive Web CSS – 在线响应式布局创建器
如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...
CSS实现响应式布局
用CSS实现响应式布局响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中使 ...
【css】响应式布局入门【转】
最近研究响应式设计框架的时候,发现网上很多相关的属性介绍,却很少有系统的入门级使用的文章,我自己整理了一篇入门知识,并没有什么高深的理论,也不牵扯到框架. 目前已经越来越多的站点以及wap站点使用响应 ...
用CSS实现响应式布局
响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用使用@media 的三种方式第一: 直接在CSS文件中使用 @ ...
CSS的响应式布局
响应式布局是什么它是相对于固定像素大小的网页而言的,顾名思义,响应式布局就是网页能够响应各种各样不同分辨率大小的设备,能够将网页很好的呈献给用户. 如何实现响应式布局? 1.CSS3@media查询 ...
css的响应式布局和动画
把响应式布局和动画放在一起写是因为他们有个共同点@符号先讲讲响应式布局@media 响应式布局==曾经==非常的流行,这种布局方式可以做出一也兼容一切设备的页面,但是当页面的功能越来越多,css文件 ...
CSS实现响应式布局(自动拆分几列)
1.css代码 <style type="text/css"> .container{ margin-top: 10px; } .outerDiv{ float:lef ...
css中响应式布局中样式的代码书写方法
代码示例:@media only screen and (min-width: 320px){ html { font-size: 8px !important; } .mulu-zi{ positi ...
web页面之响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

随机推荐

js对象添加动态属性
在业务中,经常会遇到使用同个方法调用多个同类型接口,以下简单模拟两个API接口 // api-1 { code: 0, status: 200, title: 'web前端框架', list: [ { ...
Python记录12：迭代器+生成器+生成式
'''1. 什么是迭代器什么是迭代:迭代就是一个重复的过程,但是每一次重复都是基于上一次的结果而进行的单纯的重复不是迭代: while True: print(1) 迭代的过程 l=['a','b ...
[macOS] macOS下，VirtualBox安装CentOS7.4, 搭建nginx, mysql, PHP5.6&PHP7.1
准备工作网络设置相关教程:http://www.jianshu.com/p/e6ba699b5992 ifcfg-enp0s3配置 TYPE=Ethernet BOOTPROTO=dhcp DEF ...
python 用lambda表达式代替简单的函数, 匿名函数
lambda 函数是一种快速定义单行的最小函数,可以用在任何需要函数的地方格式: lambda 参数列表:return [表达式] 变量由于lambda返回的是函数对象(构建的是一个函数对象),所 ...
select报错
query = query.Where(c => c.MfcKey==temp); int hhho = query.Count(); query = from q in query join ...
websocket 二合一
server from flask import Flask, request, render_template from geventwebsocket.handler import WebSock ...
win10忘记开机密码无法进入桌面
第一种: 电脑用微软账户登录,但密码始终不正确. 登陆这个网址 https://account.live.com/password/reset 按照提示的操作利用之前注册信息一步步重设密码最后 ...
【awk】提取文件第一列
生信数据文件一般是按列分开的,如果我们只想简单的提取一列而不是费尽周折写个程序提取哪一列的话,awk作为一个非常好用的文档处理工具,我们现在来简单看一下他的一些功能: awk '{print $1}' ...
LNMP 如何安装mongodb
wget -c http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.6.4.tgztar -zxvf mongodb-linux-x86_64 ...
nginx代理配置配置中的静态资源配置，root 和 alias的区别
这篇主要内容是:nginx代理配置配置中的静态资源配置,root 和 alias的区别.启动注意事项! 为什么会在window上配置了nginx呢?最近我们的项目是静态资源单独放在一个工程里面,后端 ...

css实现响应式布局的相关内容

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

随机推荐

热门专题