1,方案一:响应式来做,可以根据媒体查询,设定在不同屏幕宽度下div的高度和宽度,具体的设置看你响应式想怎么显示

    @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用百分比做单位时是相对于容器的宽度来算的,所以你可以把高度设为0,内容自然溢出,设置个padding-bottom height:0;
width:50%;
padding-bottom:30%
那么这个div的高宽比就是30%:50% 来源:https://blog.csdn.net/Vivianluolita/article/details/52872252

响应式网页,让div的高和宽保持等比例放大、缩小的更多相关文章

  1. 响应式网页中,如何只用CSS实现div的高和宽保持固定比例

    引言: 如果div里是<img>,原生就支持. .item img {     float: left;     margin:5%;     width: 20%; } >> ...

  2. BootStrap学习之先导篇——响应式网页

    Bootstrap学习之前,要知道响应式网页的原理. 1.什么是响应式网页? 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局.大小等.使得在不同的设备上上都可以呈现优秀的界面. 优点 ...

  3. 响应式网页设计:互联网web产品RWD概念

    RWD(Responsive Web Design)可称为自适应网页设计.响应式网页设计.响应式网页设计等等,是一种可以让网页的内容可以随着不同的装置的宽度来调整画面呈现的技术,让使用者可以不需要透过 ...

  4. CSS/CSS3中的原生变量var详解以及布局响应式网页扩展

    使用语法 首先我们先来看一个例子:html代码: <div class="element">这是一段文字</div> css代码: .element { w ...

  5. 15款免费的 HTML5/CSS3 响应式网页模板

    如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...

  6. FROONT – 超棒的可视化响应式网页设计工具

    FROONT 是一个基于 Web 的设计工具,在浏览器中运行,使得各类可视化设计的人员都能进行响应式的网页设计,即使是那些没有任何编码技能的设计师.FROONT 使得响应式网页设计能够可视化操作,能够 ...

  7. HTML5+CSS3的响应式网页设计:自动适应屏幕宽度

    这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...

  8. bootstrap响应式网页设计的9条基本原则!

    bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...

  9. 学习笔记1--响应式网页+Bootstrap起步+全局CSS样式

    一.学习之前要了解一些背景知识: 在2g时代,3g时代,4g时代,早期的网页浏览设备,功能机,智能机.(本人最喜欢的透明肌,和古典黑莓机) 1.什么是响应式网页? Responsive Web Pag ...

随机推荐

  1. java加密算法相关

    简介 RSA公钥加密算法是1977年由罗纳德·李维斯特(Ron Rivest).阿迪·萨莫尔(Adi Shamir)和伦纳德·阿德曼(Leonard Adleman)一起提出的.1987年首次公布,当 ...

  2. leetcode-hard-array-287. Find the Duplicate Number

    mycode   77.79% class Solution(object): def findDuplicate(self, nums): """ :type nums ...

  3. 判断List是否为空的问题

    今天公司安排给页面调试Bug,感觉公司人员写的判断判断List是否为空存在一定的问题,公司判断是list!=null这是完全不对的,这只会判断是否有list对象.如果为空,他也会执行if(list!= ...

  4. Spring Boot Cli下载安装

    本地下载地址: spring-boot-cli-2.1.8.RELEASE-bin.zip  : https://pan.baidu.com/s/1GMyxj1PecsM4BG_hzoteVQ spr ...

  5. JSTL标签(核心标准库)

    使用JSTL标签步骤 1) 导入jstl支持的jar包(标签背后隐藏的java代码) 注意:使用javaee5.0的项目自动导入jstl支持jar包 2)使用taglib指令导入标签库 <%@t ...

  6. 1.Oracle 11g 精简客户端

    大型项目开发中,当属Oracle的使用率最高.通常开发人员的机器上都会装上一个 oracle客户端,但一般我们不会再自己的机器上安装Oracle database,因为我们的项目中有专为开发使用的or ...

  7. c++ qsort函数应用

    C++ qsort在"iostream" c在头文件stdlib.h中,strcmp在string.h中.下列例子默认从小到大排序即(a>b返回>0),反之从小到大排序 ...

  8. 惠州双月湾游记 & 攻略

    惠州双月湾游记&攻略 2019 年的 11 月底和小朱.Josie 约了快乐周末去惠州双月湾玩! 我和时猪一起从武汉出发到广州,然后和他们俩一起从广州自驾去的惠州.大致行程如下: Day 1: ...

  9. Day01:文件操作(File、RandomAccessFile)

    文件操作 JAVA中的 File 类是文件和目录路径名的抽象形式.使用 File 类可以获取文件本身的一些信息,例如文件所在的目录.文件长度.文件读写权限等. 在 Java 中,File 类是 jav ...

  10. 【VS开发】设备控制台 (DevCon.exe) 命令

    设备控制台 (DevCon.exe) 命令 DevCon (DevCon.exe) 是一个命令行工具,可以显示有关运行 Windows 的计算机上设备的详细信息.还可以使用 DevCon 启用.禁用. ...