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月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
随机推荐
- 使用hashlib进行文件校验
import hashlib import os path = r'D:\CentOS 64 位' def file_md5(path): """ 文件校验 :param ...
- 网络视频播放ZFPlayer
根据项目需要,公司app需要用到视频播放功能,推荐ZFPlayer,视频播放几乎有你想要的任何样式,该博客只是为了给自己留一个以后查找的资料, 改代码可以使用ZFPlayer github地址 htt ...
- 20190422 SQL SERVER 服务
-- 数据库服务-- SQL Server(MSSQLSERVER)是必须要开启的,这个是数据库引擎服务,就像汽车的发动机一样-- SQL Server代理(MSSQLSERVER)是代理服务,比如你 ...
- C#设计模式(3)——工厂方法模式（转）
C#设计模式(3)——工厂方法模式 一.引言 在简单工厂模式中讲到简单工厂模式的缺点,有一点是——简单工厂模式系统难以扩展,一旦添加新产品就不得不修改简单工厂方法,这样就会造成简单工厂的实现逻辑过 ...
- 221. Maximal Square(动态规划)
Given a 2D binary matrix filled with 0's and 1's, find the largest square containing only 1's and re ...
- AD域与外部网站域名相同处理办法
环境 域控:Windows Server 2008 r2 AD域:example.cn 问题:DNS可以正常解析外部域名(如www.baidu.com),但是无法解析mail.example.cn 原 ...
- keepalived weight正负值问题(实现主服务器nginx故障后迅速切换到备服务器)
有两台负载均衡,lb01,lb02. lb02, priority值为100 编辑keepalived配置文件 vim /etc/keepalived/keepalived.conf ! Con ...
- JVM探秘5---JVM监控命令大全
jps命令---查看JVM进程状况 格式为:jps [options] [hostid] 功能描述: jps是用于查看有权访问的hotspot虚拟机的进程. 当未指定hostid时,默认查看本机jvm ...
- CSS中一个冒号和两个冒号有什么区别
一个冒号是伪类,两个冒号是伪元素 伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的.不存在于文档树中且表达方式也不同,所以叫伪类.伪元素所控制的内容和一 ...
- 不同路由器下远程ssh登录Beaglebone系统（通过路由器端口转发，配合花生壳的DDNS功能）
使用场景: 一般家庭设备都是通过路由器中转连上互联网的,而且运营商给家庭宽带分配的IP地址也是动态的.随时可能变动的.所以当程序员们离开家之后,是很难直接和家里的设备进行交互的.但是通过TPLINK路 ...