响应式、手机端、自适应 百分比实现div等宽等高的方法
在百分比布局中, 有时候会遇见一个头疼的问题,就是如果某个布局是正方形的话,我们在这种情况下考虑到适应各种媒体尺寸,又不能给它定固定的宽高。
之前遇见过纯色布局的结果我就用纯色图片代替实现的,现在有了这个方法,再也不用担心高度不等于宽度的问题了。
用这个方法的话无论你设置的宽度是%几,它的高度都和你的宽度相等
<!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等宽等高的方法的更多相关文章
- 前端切图:手机端自适应布局demo
手机端自适应布局demo原型如下: 图片发自简书App 要求如下:适应各种机型源码如下: <!DOCTYPE html > <html> <head> <me ...
- 织梦M手机端/自适应网站内容图片变形解决办法
我们在做响应式网站或者织梦M功能手机站的时候,会发现如果内容页图片太大,在移动端显示会变形,dede手机端图片过长等问题,手机端文章内容页图片不能自适应!这给通过手机端浏览网站的用户造成了很不好的用户 ...
- FLASH CC 2015 CANVAS (四)制作响应式设计(自适应)的项目
注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误(如果发现我会更新文章)! 正式教程会在后续开始更新 相信你在看了(第二节)(第三节)之后已经能够满足绝大多数的互动需求了.那么也 ...
- 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配
Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...
- 精讲响应式WebClient第2篇-GET请求阻塞与非阻塞调用方法详解
本文是精讲响应式WebClient第2篇,前篇的blog访问地址如下: 精讲响应式webclient第1篇-响应式非阻塞IO与基础用法 在上一篇文章为大家介绍了响应式IO模型和WebClient的基本 ...
- 怎么设置table(表格)手机端自适应宽度
我们在wordpress文章页面经常会用到表格,有些是从其他网页或者文档复制粘贴过来的,在电脑设备网页上都能很好的展示,但是在移动设备上或者低分辨率设备上却经常撑破列宽,很是影响美观和客户体验.这里就 ...
- 编写手机端自适应页面案例,springMVC代码,SpringMVC上传代码,去掉input框中原有的样式,使ios按钮没有圆角,css中的border-radius类似
1.编写的页面 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...
- 手机端自适应布局demo
原型如下: 要求如下:适应各种机型 源码如下: <!DOCTYPE html > <html> <head> <meta http-e ...
- 手机端自适应缩放显示 js
<script> var _width = parseInt(window.screen.width); var scale = _width/640; var ua = navigato ...
随机推荐
- centOS7下安装GUI图形界面
1.如何在centOS7下安装GUI图形界面 当你安装centOS7服务器版本的时候,系统默认是不会安装GUI的图形界面程序,这个需要手动安装CentOS7 Gnome GUI包. 2.在系统下使用命 ...
- 记MSSQL数据库sa账号短时间密码失效问题
在腾讯云服务器上安装了MSSQL2012,64位英文版本. sa账号的密码需要在一定时间内失效,无法访问.当时密码设置为admin@123. 最后修改了密码,改为比较复杂的密码,包含特殊字符,不包含a ...
- 转:Centos6.5_x86安装Redis。
Redis是一个高性能的,开源key-value型数据库.是构建高性能,可扩展的Web应用的完美解决方案,可以内存存储亦可持久化存储.因为要使用跨进程,跨服务级别的数据缓存,在对比多个方案后,决定使用 ...
- 使用Java语言开发微信公众平台(七)——音乐消息的回复
在上一节课程中,我们学习了图片消息的回复功能.根据微信公众平台的消息类型显示,微信共支持文本.图片.语音.视频.音乐.图文等6种消息类型的回复: 其中,我们已经实现了文本.图文.图片等消息的回复处理, ...
- C语言中,隐藏结构体的细节
我们都知道,在C语言中,结构体中的字段都是可以访问的.或者说,在C++ 中,类和结构体的主要区别就是类中成员变量默认为private,而结构体中默认为public.结构体的这一个特性,导致结构体中封装 ...
- Editplus配置java运行环境以及其他需求的简单设置
java配置 首先,打开"工具"(tools)选项,选择"配置自定义工具组"(英文版 是倒数第二个)然后按照上面第二幅图片来配置javac环境,其中命令一栏是j ...
- 关于Cookie安全性设置的那些事
一.标题:关于Cookie安全性设置的那些事 副标:httponly属性和secure属性解析 二.引言 经常有看到XSS跨站脚本攻击窃取cookie案例,修复方案是有httponly.今天写出来倒腾 ...
- 01-.Net编程机制
.NetFarmwark特点: 多平台:该系统可以在广泛的计算机上运行,包括从服务器.桌面机到PDA和移动电话. 行业标准:该系统使用行业标准的通信协议,比如XML.HTTP.SOAP和WSDL. 安 ...
- crontab表达式执行时间计算,crontab在线测试
熟悉Unix和Linux的朋友都知道Crontab表达式,通过crontab指令可以周期性调用或执行某个程序. 但是大家写完crontab表达式后,心里总是担心表达式写的不对,可以又没法去验证.比 ...
- MySQL1-基础知识点
目录 零.MySQL安装与配置 一.基本概念 二.基本语法 三.常用指令 四.四种SQL语句 零.MySQL安装与配置 http://www.cnblogs.com/hikarusun/a ...