在百分比布局中, 有时候会遇见一个头疼的问题,就是如果某个布局是正方形的话，我们在这种情况下考虑到适应各种媒体尺寸，又不能给它定固定的宽高。

之前遇见过纯色布局的结果我就用纯色图片代替实现的，现在有了这个方法，再也不用担心高度不等于宽度的问题了。

用这个方法的话无论你设置的宽度是%几，它的高度都和你的宽度相等

<!DOCTYPE HTML>

<html>

<head>

<style>

.father {

    width: 50%;  /*改一下宽度试试看*/

}

.daughter {

    width: 100%; height: 0;

    padding-top: 100%;

    background: #ff7500;;

}

</style>

</head>

<body>

<div class = "father">

    <div class = "daughter"></div>

</div>

响应式、手机端、自适应 百分比实现div等宽等高的方法的更多相关文章

  1. 前端切图:手机端自适应布局demo

    手机端自适应布局demo原型如下: 图片发自简书App 要求如下:适应各种机型源码如下: <!DOCTYPE html > <html> <head> <me ...

  2. 织梦M手机端/自适应网站内容图片变形解决办法

    我们在做响应式网站或者织梦M功能手机站的时候,会发现如果内容页图片太大,在移动端显示会变形,dede手机端图片过长等问题,手机端文章内容页图片不能自适应!这给通过手机端浏览网站的用户造成了很不好的用户 ...

  3. FLASH CC 2015 CANVAS （四）制作响应式设计（自适应）的项目

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误(如果发现我会更新文章)! 正式教程会在后续开始更新 相信你在看了(第二节)(第三节)之后已经能够满足绝大多数的互动需求了.那么也 ...

  4. 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配

    Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...

  5. 精讲响应式WebClient第2篇-GET请求阻塞与非阻塞调用方法详解

    本文是精讲响应式WebClient第2篇,前篇的blog访问地址如下: 精讲响应式webclient第1篇-响应式非阻塞IO与基础用法 在上一篇文章为大家介绍了响应式IO模型和WebClient的基本 ...

  6. 怎么设置table(表格)手机端自适应宽度

    我们在wordpress文章页面经常会用到表格,有些是从其他网页或者文档复制粘贴过来的,在电脑设备网页上都能很好的展示,但是在移动设备上或者低分辨率设备上却经常撑破列宽,很是影响美观和客户体验.这里就 ...

  7. 编写手机端自适应页面案例，springMVC代码，SpringMVC上传代码，去掉input框中原有的样式，使ios按钮没有圆角,css中的border-radius类似

    1.编写的页面 <%@ page language="java" contentType="text/html; charset=UTF-8"  page ...

  8. 手机端自适应布局demo

    原型如下: 要求如下:适应各种机型 源码如下: <!DOCTYPE html > <html>     <head>         <meta http-e ...

  9. 手机端自适应缩放显示 js

    <script> var _width = parseInt(window.screen.width); var scale = _width/640; var ua = navigato ...

随机推荐

  1. JavaScript知识点整理（一）

    JavaScript知识点(一)包括 数据类型.表达式和运算符.语句.对象.数组. 一.数据类型 1) js中6种数据类型:弱类型特性 5种原始类型:number(数字).string(字符串).bo ...

  2. 最新合购网源码net.asp程序 彩票合买功能采用全新内核、全新架构，更小巧、功能更强、更快、更安全稳定

    合买代购功能 可购彩种:福彩3D.排列3.重庆时时彩.天津时时彩.广东11选5.11运夺金.江苏快3.广西快3.拥有上百种玩法,更多彩种即将开发完成,更多的彩种不断开发更新中... 选号投注:建立追号 ...

  3. 实现ThreadFactory接口生成自定义的线程给Fork/Join框架

    Fork/Join框架是Java7中最有趣的特征之一.它是Executor和ExecutorService接口的一个实现,允许你执行Callable和Runnable任务而不用管理这些执行线程.这个执 ...

  4. iOS 关于UITableView的黑科技

      UITableView是我们最常用的控件了,今天我就来介绍一些关于UITableView的黑科技和一些注意的地方. 1.修改左滑删除按钮的高度   左滑删除这是iOS最先发明的,之后安卓开始模仿. ...

  5. 0.Java并发包系列开篇

    在我们想要谈论Java并发包(java.util.concurrent)的时候,这是一个头疼的问题,却又是每个Java工程师不得不掌握的一项技能.一直以来都想写一个Java并发包系列,无奈迟迟没有动手 ...

  6. JUnit学习

    很早以前就知道JUnit也知道它用来做单元测试.今天突然又想到还是要学一下这个JUnit,不然说出去不知道怎么用JUnit做单元测试……作为一个程序员怪丢人的.第一篇JUnit不算是一个总结性的文章, ...

  7. 3.从AbstractQueuedSynchronizer(AQS)说起(2)——共享模式的锁获取与释放

    在上节中解析了AbstractQueuedSynchronizer(AQS)中独占模式对同步状态获取和释放的实现过程.本节将会对共享模式的同步状态获取和释放过程做一个解析.上一节提到了独占模式和共享模 ...

  8. Natas Wargame Level 15 Writeup(Content-based Blind SQL Injection)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAq4AAACGCAYAAAAcnwh0AAAABHNCSVQICAgIfAhkiAAAIABJREFUeF

  9. 如何用C#完成控制台日历？

    本题目的最终要就是根据用户输入的年和月在控制台输出单月的日历信息,附加范围年在1900-2100之间,月的范围在1-12之间,当用户输入不在范围时要给予错误信息提示:已知条件是1900年1月1日为星期 ...

  10. 解决ubuntu的gedit显示中文乱码问题

    http://www.cnblogs.com/zhcncn/p/4032321.html