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月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
随机推荐
- TP框架中分页类的使用
public function test(){ $m=M('Message'); import('ORG.Util.Page');// 导入分页类 $count = $m->count();// ...
- 017-并发编程-Condition
一.概述 任何一个Java对象,都拥有一组监视器方法,主要包括wait().notify().notifyAll()方法,这些方法与synchronized关键字配合使用可以实现等待/通知机制.使用这 ...
- python进阶之 进程&线程区别
1.进程创建方式 import time import os from multiprocessing import Process def func (): time.sleep(1) print( ...
- DTCC2019第十届中国数据库技术大会将于5月在北京召开
作为国内顶级的数据领域技术盛会,10年来,DTCC见证了国内数据库技术的迅猛发展,各种分布式数据库.NoSQL.NewSQL技术异军突起,与Oracle.DB2等分庭抗礼,甚至大有超越之势.在这种背景 ...
- python操作excel的读、计算、写----xlrd、copy
import xlrd from xlutils.copy import copy class ExcelUtil: def __init__(self,excel_path=None,index=N ...
- egg.js基础入门
之前一直使用koa, 刚刚接触egg, 做了一些入门的笔记 准备工作 1 首先安装脚手架,,并创建项目. $ npm i egg-init -g $ egg-init egg-demo --type ...
- 网页布局要注意的事项，以及CSS3需要特别注意的地方。
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;隐藏超出部分,出省略号 一定要先布局!布局!布局!要先设置好色块,将位置确 ...
- Python RabbitMQ消息持久化
RabbitMQ消息持久化:就是将队列中的消息永久的存放在队列中. 处理方案: # 在实例化时加入durable=True来确认消息的实例化,客户端服务端都要写 channel.queue_dec ...
- Linux 系统级开启文件句柄 调优
系统级开启文件句柄 max-file系统级别的能够打开的文件句柄的数量,Centos7默认是794168. Max-file 与 ulimit -n 的区别 max-file 表示系统级别的能够打开 ...
- 提交SR的一些小技巧
在平时的时候,遇到一些问题总会在metalink上提交SR(Service Request,SR,过去也叫Technical Assistance Request,TAR ),我们提交sr的时候,总是 ...