如果说宽高自适应屏幕尺寸那么大家可能会想到

div{
width: 100%;
height: 100%
}

但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死)

那就要实现如下的黑科技了

div{
width: 100%
height: 0
padding-top: 100% /* padding 设置为100% 的时候会等于其父容器的宽度 */ }

根据w3c 标准,当padding值为 100% 时 其相等于元素自身包含块的宽度,所以把padding-top 或者 padding-bottom 为 100% 的时候,元素的高度便会被pading 撑开,而且!它的高度等于它包含块的宽度!! 黑科技啊

上面的代码例子展示了如何让一个元素宽度适应的屏幕的同时其高度也会随着宽度一起变化实现正方形

如若要在它内部放置子元素并且和他的宽高相等就需要把子元素浮动或绝对定位,脱离文档流,这样子元素才不会被设置好的 padding 影响

有关padding 百分比值的解释可以看看这篇文章

http://www.cnblogs.com/linguoguo/p/4942034.html

【笔记】css 实现宽度自适应屏幕 高度自适应宽度的更多相关文章

  1. css实现自适应屏幕高度;

    css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...

  2. js自适应屏幕高度

    //自适应屏幕高度 $(window).resize(function() { hightChange(); }); function hightChange(){ ; $();// iframe i ...

  3. jquery库实现iframe自适应内容高度和宽度

    javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码! ‍<iframe src="index.php" id=&qu ...

  4. css实现div中图片高度自适应并与父级div宽度一致

    需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...

  5. 典型的DIV CSS三行二列居中高度自适应布局

    如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) ...

  6. 小程序之image图片实现宽度100%,高度自适应

    哇 今天搞了半天  图片一直变形啊啊啊啊 宽度100%   高度给100%   给auto   完全不管用啊啊啊啊 然后最后最终!!!! 首先我们要给我们的图片一个100%的宽度!让它自适应!! .g ...

  7. 通过代码创建label 计算最佳尺寸 让其自适应文本高度或宽度

    通过xib创建label  让label随着文本内容的变化而动态改变尺寸比较简单  只要不固定死尺寸就可以了  但是通过代码创建的话我们需要给label设置一个frame  否则label默认是没有尺 ...

  8. 设置iframe高度自适应屏幕高度

    写在前面: 最近在搭建项目前台页面框子的时候,把iframe设置成了固定的高度,导致不同的电脑尺寸访问的时候,高度差异较大,故查了下,将iframe设置成自动适应屏幕高度的方式,这里记录下. 还是直接 ...

  9. CSS图片宽度设置百分比 , 高度同宽度相同

    在图片长宽不相等的情况下,想将长宽设置为相等并且自适应屏幕,可以通过 js 的方式进行设置并通过监听 resize 来实时更新,但是这种方式很麻烦. 这里通过 css 来达到我们想要的效果: < ...

随机推荐

  1. SpringMVC PathVariable和post、get、put、delete请求

    1.PathVariable 可以映射URL中的占位符到目标方法的参数中. 2.Rest风格的URL 以CRUD为例: 新增:/order POST 修改:/order/id PUT 获取:/orde ...

  2. MicroPython开发之物联网快速开发板

    Python的火热让其运行在MCU端的MicroPython也逐渐迎来了春天.MicroPython的出现让Python这种"胶水语言"成功引用到嵌入式领域,也使得Python控制 ...

  3. js 数组API之filter的用法

    filter 查找数组中满足条件的元素,返回新数组:原数组不变 var subArr = arr.filter(function(value, index, array){ return 条件 }) ...

  4. 前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例

    使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基础与模块化的内容再使用vue-cli开发 ...

  5. win10安装Tensorflow

    win10安装Tensorflow 前提: 保证你的pip>=8.1版本 否则利用python -m pip install -U pip  进行升级,或下载pip源文件 确定你的显卡是否支持c ...

  6. ionic2 App搭建(三)

    cmd命令提示框中进入项目文件夹 运行命令 ionic serve --lab  结构如下图 这里数据是没有接受到的,是因为跨域的问题,解决方案是谷歌浏览器配置跨域指令如下: 配置chrome浏览器允 ...

  7. 1、ABPZero系列教程之拼多多卖家工具 前言

    此系列文章围绕着拼多多卖家工具来介绍ABPZero的使用,内容包括手机登录.手机注册.拼团提醒.微信公众号绑定帐号.有拼团发送消息到微信公众号(只要关注过微信公众号并已绑定系统帐号). 学习此系列必备 ...

  8. 高效开发技巧:为什么你下载Git项目这么慢?

    文章首发于[博客园-陈树义],点击跳转到原文<高效开发技巧:为什么你下载Git项目这么慢?>. 笔者所在公司采用的是 GitLab 进行版本管理,但许多同事下载 Git 项目的路径是这样的 ...

  9. liveshow回顾

    在2017年8月14号的一天接到一个即看即买的项目,大致功能如下 1.现场走秀直播同步到H5页面 2.实时显示直播间人数 3.点赞并实时显示给用户 4.在某个时间点,可以全体推送一些消息给所有用户 5 ...

  10. CentOS7配置静态IP

    确保是在root用户下进行操作,首先进入network-scripts目录 cd /etc/sysconfig/network-scripts/ 通过ls列出该目录下的所有文件,其中"ifc ...