响应式网页中,如何只用CSS实现div的高和宽保持固定比例
引言:
如果div里是<img>,原生就支持。
- .item img {
- float: left;
- margin:5%;
- width: 20%;
- }
>>>>>>>>>>>>>>>demo1请点击<<<<<<<<<<<<<<
正文:
- @media only screen and (min-width: 100px) and (max-width: 640px) {
- div{
- width: 100px;
- height: 100px;
- }
- }
- @media only screen and (min-width: 641px) and (max-width: 789px) {
- div{
- width: 200px;
- height: 200px;
- }
- }
2、利用padding-bottom是百分比值的话,参考的是父元素的width而不是height。
- .item {
- float: left;
- background-color: darkslategrey;
- border: 1px solid black;
- margin: 5%;
- width: 20%;
- height: 0;
- padding-bottom: 20%;
- }
>>>>>>>>>>>>>>>demo2请点击<<<<<<<<<<<<<<
3、使用vw属性,他是参考整个viewport(视窗)的宽度【vw、vh、vmin、vmax是css3新属性,支持主流浏览器且IE10以上】
- .item {
- float: left;
- background-color: darkslategrey;
- border: 1px solid black;
- margin: 5%;
- width: 20vw;
- height: 20vw;
- }
>>>>>>>>>>>>>>>demo3请点击<<<<<<<<<<<<<<
参考资料:
【CSS中margin-top/bottom(padding-top/bottom)百分比为何以最近的块级祖先元素的宽度而不是高度作计算?】
响应式网页中,如何只用CSS实现div的高和宽保持固定比例的更多相关文章
- 响应式网页,让div的高和宽保持等比例放大、缩小
1,方案一:响应式来做,可以根据媒体查询,设定在不同屏幕宽度下div的高度和宽度,具体的设置看你响应式想怎么显示 @media only screen and (min-width: 100px) a ...
- CSS/CSS3中的原生变量var详解以及布局响应式网页扩展
使用语法 首先我们先来看一个例子:html代码: <div class="element">这是一段文字</div> css代码: .element { w ...
- 响应式布局中的CSS相对量
一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格. 在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的.例如,常见的响应式布局中需 ...
- 学习笔记1--响应式网页+Bootstrap起步+全局CSS样式
一.学习之前要了解一些背景知识: 在2g时代,3g时代,4g时代,早期的网页浏览设备,功能机,智能机.(本人最喜欢的透明肌,和古典黑莓机) 1.什么是响应式网页? Responsive Web Pag ...
- FROONT – 超棒的可视化响应式网页设计工具
FROONT 是一个基于 Web 的设计工具,在浏览器中运行,使得各类可视化设计的人员都能进行响应式的网页设计,即使是那些没有任何编码技能的设计师.FROONT 使得响应式网页设计能够可视化操作,能够 ...
- HTML5+CSS3的响应式网页设计:自动适应屏幕宽度
这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...
- bootstrap响应式网页设计的9条基本原则!
bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...
- BootStrap学习之先导篇——响应式网页
Bootstrap学习之前,要知道响应式网页的原理. 1.什么是响应式网页? 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局.大小等.使得在不同的设备上上都可以呈现优秀的界面. 优点 ...
- 响应式网页设计:互联网web产品RWD概念
RWD(Responsive Web Design)可称为自适应网页设计.响应式网页设计.响应式网页设计等等,是一种可以让网页的内容可以随着不同的装置的宽度来调整画面呈现的技术,让使用者可以不需要透过 ...
随机推荐
- [poi2007] biu
题意:给定一个图,点n<=105,边m<=106,现在求它的补图有多少个联通分量.. 思路:很容易想到并查集,但是补图边太多了.. 于是只能优化掉一些多余的边.. 具体做法是用队列优化.. ...
- WP7系统托盘和应用程序栏
(一)系统托盘和应用程序栏系统托盘(1)显示系统级别的状态信息(2)Apps能隐藏和显示系统托盘Micosoft.Phone.Shell.SystemTray.IsVisible=true;应用程序栏 ...
- 书TO BE READED
Books Created Wednesday 10 August 2011 1.<你的降落伞是什么颜色> 在求职书里面,我觉得这本书是最接近于圣经的. 第一版出现大概还是上世纪70年代末 ...
- kvm虚拟机--存储池配置梳理(转)
1.创建基于文件夹的存储池(目录) 2.定义存储池与其目录 1 # virsh pool-define-as vmdisk --type dir --target /data/vmfs 3.创建已定义 ...
- [你必须知道的NOSQL系列]专题一:MongoDB快速入门
一.前言 现在越来越多的公司开始采用非关系数据库了,并且很多公司的面试都要求面试者有MongoDB的使用经验,至于非关系数据库与关系型数据库之间的区别大家可以自行百度.但是作为程序员的我们,既然大部分 ...
- SQL Server 存储(3/8):理解GAM和SGAM页
我们知道SQL Server在8K 的页里存储数据.分区就是物理上连续的8个页.当我们创建一个数据库,数据文件会被逻辑分为页和区,当用户对象创建时,页会分配给它用来存储数据.GAM(Global Al ...
- AMD加载器实现笔记(四)
继续这一系列的内容,到目前为止除了AMD规范中config的map.config参数外,我们已经全部支持其他属性了.这一篇文章中,我们来为增加对map的支持.同样问题,想要增加map的支持首先要知道m ...
- FusionCharts简单教程(三)-----如何自定义图表上的工具提示
最近有蛮多人总是问我这个FusionCharts制表的问题,帮助他们解决之后,在昨晚发现以前整理的笔记中有这个简单教程,而且以前也发表了几篇这个博文,所以就将其全部上传上来供别人参考.如有不正确之处望 ...
- js DOM优化相关探索
我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...
- 黑马程序员_java08_多线程
转载于:http://www.itxuexiwang.com/plus/view.php?aid=148 线程是程序中可以并行执行的任务. java运行系统总是选当前优先级最高的处于就绪状态的线程来执 ...