css实现响应式布局的相关内容
所以我就在做自适应的时候查了一些资料
首先我发现一个问题：有响应式布局和自适应布局两种布局效果
简单来说，响应式布局就是不同的设备无论大小 布局都自动调整大小 页面布局都一样 可以保证无论什么设备 用户体验是一样的 ；而自适应布局同一页面在不同设备可能呈现不一样的页面效果，比如两张图并排排列变成两张图上下排列
总体来说，现如今响应式布局使用得更多，而不用框架实现自适应其实是有很多方法：
一、用CSS中的媒体查询
其中使用@media也有三种方式
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>
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月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
随机推荐
- android从IIS/asp.net下载apk文件
解决步骤: 1.web.config中 <configuration> <configSections> ... <section name="rewr ...
- OC 使用CIFilter添加图片
+(UIImage *)createInviteImgWithUserCodeStr:(NSString *)userCode{ userCode = [NSString stringWithForm ...
- day014 模块
# 1.用于多种语言交互 编程语言通用数据 # 内置的 不需要安装 直接导入使用 import json # 导入一个json模块 # dumps loads# dump load 有持久化的功能 # ...
- emqtt日志、证书、集群状态等位置
1.日志 进入pod后,cd /var/log/emqttd/ 可以看到四种日志 2.证书等位置 cd /etc/emqttd 3.集群状态查询位置 任意位置 emqttd_ctl cluster s ...
- shmdt() 与 shmctl() 的区别？
操作共享内存,我们用到了下面的函数 ============================================== #include <sys/types.h> #inclu ...
- 【Common】NO.81.Note.1.Common.1.002-【文章摘要】
1.0.0 Summary Tittle:[Common]NO.81.Note.1.Common.1.002-[文章摘要] Style:Common Series:Common Since:2018- ...
- hive使用动态分区时如果动态分区的字段存在空值的问题
hive的数据是放到hdfs中,当我们的分区字段类型为string时,如果使用动态分区向表中插入数据,而动态分区的那个字段恰好为null或者空字符串,这样hive会为其选一个默认的分区,我们查数据时分 ...
- ECMAScript6 入门教程 初学记录let命令 块级作用域
一.基本语法-let命令 (1)ES6新增了let命令,用来声明变量.所声明的变量,只在let命令所在的代码块内有效. 循环的计数器,就很合适使用let命令.计数器i只在for循环体内有效,在循环体外 ...
- 第七篇——Struts2的接收参数
Struts2的接收参数 1.使用Action的属性接收参数 2.使用Domain Model接收参数 3.使用ModelDriven接收参数 项目实例 1.项目结构 2.pom.xml <pr ...
- 【Spark-core学习之六】 Spark资源调度和任务调度
环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...