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

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

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

<!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. JAVA中断机制详解

    Java提供了中断机制,可以使用它来结束一个线程.这种机制要求线程检查它是否被中断了,然后决定是不是响应这个中断请求.线程允许忽略中断请求并继续执行.Java的中断是一种协作机制.也就是说调用线程对象 ...

  2. Scala基础 - 下划线使用指南

    下划线这个符号几乎贯穿了任何一本Scala编程书籍,并且在不同的场景下具有不同的含义,绕晕了不少初学者.正因如此,下划线这个特殊符号无形中增加Scala的入门难度.本文希望帮助初学者踏平这个小山坡. ...

  3. 弹出输入内容prompt

    <script> window.onload = function(){ var oBtn = document.getElementById( "btn" ); oB ...

  4. JVM类加载续

    上一篇理解了JVM类加载过程的第一个阶段,这篇来说说剩下的阶段:验证.准备.解析.初始化.需要注意的是,这些阶段(解析除外)只是按照这个顺序开始,但是执行的过程中可能存在交叉. 验证:就是要对加载的二 ...

  5. JUnit之断言assert

    一.简介 JUnit4.4引入了Hamcrest框架,Hamcest提供了一套匹配符Matcher,这些匹配符更接近自然语言,可读性高,更加灵活: 使用全新的断言语法:assertThat,结合Ham ...

  6. 使用Html5下WebSocket搭建简易聊天室

    一.Html5WebSocket介绍 WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站 ...

  7. Regression：Generalized Linear Models

    作者:桂. 时间:2017-05-22  15:28:43 链接:http://www.cnblogs.com/xingshansi/p/6890048.html 前言 本文主要是线性回归模型,包括: ...

  8. 聊一聊JQ中delegate事件委托的好处

    下面举个例子 我们希望通过点击使得点击的li标签变红 <body style="height:2000px;"> <ul> <li>1111&l ...

  9. 源码阅读—Iterator接口和LIstIterator接口

    在继续看ArrayList源码之前,先了解Iterator接口和ListIterator接口,下篇文章详细讲解ArrayList是如何实现它们的. 我们知道,接口只是一种规范,当继承接口并实现其中的方 ...

  10. 实现分布式队列ZooKeeper的实现

    一.背景 有一些时候,多个团队需要共同完成一个任务,比如,A团队将Hadoop集群计算的结果交给B团队继续计算,B完成了自己任务再交给C团队继续做.这就有点像业务系统的工作流一样,一环一环地传下去,直 ...