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月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
随机推荐
- EFM32G232F64时钟树
1.为了熟悉MCU的时钟树,先看看EFM32G232F64的CMU(ClockManagementUnit) 时钟管理单元(CMU)用于管控晶振(时钟源)和各个时钟节点.出于降低功耗和启动时间的目的, ...
- spring相关jar包
spring.jar是包含有完整发布的单个jar 包,spring.jar中包含除了spring-mock.jar里所包含的内容外其它所有jar包的内容,因为只有在开发环境下才会用到 spring-m ...
- 3、LwIP协议栈规范翻译——概述
3.概述 像许多其他TCP/IP实现一样,分层协议设计已经成为设计lwIP实现的指南.每个协议实现为自己的模块,其中几个功能充当每个协议的入口点.尽管协议层是单独实现的,一些层却不全是,正如前面所叙述 ...
- Jenkins+Jmeter持续集成笔记（二：ANT执行Jmeter脚本）
Jmeter接口测试脚本运行后生成的是jtl(xml)格式的文件,这些文件不具备可读性,所以我们要把他转化为可以阅读的html格式报告. Ant是一个功能强大的打包编译工具.我们使用他的目的是将xml ...
- ORACLE结构体系篇之表空间详解.md
表空间详解一.系统表空间SYSTEM 表空间是Oracle 数据库最重要的一个表空间,存放了一些DDL 语言产生的信息以及PL/SQL 包.视图.函数.过程等,称之为数据字典,因此该表空间也具有其特殊 ...
- Oracle 11g R2创建数据库之DBCA静默方式
通常创建Oracle数据库都是通过DBCA(Database Configuration Assistant)工具完成的,DBCA工具可以通过两种方式完成建库任务,即图形界面方式和静默命令行方式.既然 ...
- 从零开始一起学习SLAM | 理解图优化，一步步带你看懂g2o代码
首发于公众号:计算机视觉life 旗下知识星球「从零开始学习SLAM」 这可能是最清晰讲解g2o代码框架的文章 理解图优化,一步步带你看懂g2o框架 小白:师兄师兄,最近我在看SLAM的优化算法,有种 ...
- axios、ajax、fetch三者的区别
1.ajax:是指一种创建交互式网页应用的网页开发技术,并且可以做到无需重新加载整个网页的情况下,能够更新部分网页,也叫作局部更新 优缺点: 1)局部更新 2)原生支持,不需要任何插件 3)原生支持, ...
- Codeforces 979E Kuro and Topological Parity - 动态规划 - 组合数学
题目传送门 传送点 题目大意 给定$n$个标号依次为$1, 2, \cdots, n$的点,其中一些点被染成一些颜色,剩下的点没有染色.你需要添加一些有向边并将剩下的点染色,满足有向边从编号小的一端指 ...
- Guitar Pro里的编谱方式怎么用？
今天来教大家如何使用Guitar Pro中的编谱方式来让我们的乐谱更加美观整齐耐看,我们一起get起来吧! 相信我们每一个人在使用Guitar Pro进行编曲创作时,都会碰到这种情况,在乐谱上,会看到 ...