纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊…可是在项目上线之后,才让我崩溃了,原因非常easy,在低于安卓4.4的版本号的手机上,自带的浏览器是不支持这个属性的.

好吧,这还不时最坑爹的,在国产的猎豹浏览器以及其它一些浏览器里面,有可能也不支持.总而言之,这个坑踩大了.只是没关系,大部分的常见布局问题,我都能解决掉.可是,以下这个….我真心有点费解.只是,没关系,通过我的研究,终于还是非常快用CSS攻克了.

须要的效果,例如以下图:

需求分析

看图,事实上非常easy.假设宽度是固定的,那么这个布局就不要太简单了.

问题是,设备的宽度是不固定的哦,那么问题就是,在不知道详细宽度的时候,怎样来设定它相应的高度呢?

也就是说,怎样在CSS中,找到一个高度和宽度挂钩的属性.仅仅要存在这个參数,那么,问题就能解决.

那么有没有这个參数呢?

有的.那就是padding

代码实践

普通情况下,是想不起来padding有这个特性的.只是,想起来了,那么这个问题就迎刃而解了,看代码吧.

HTML结构

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

</head>

<body>

    <div class="box1"></div>

    <div class="box2"></div>

    <div class="box3"></div>

</body>

</html>

CSS代码

* {margin: 0;padding: 0;}

.box1 {width: 50%;padding-bottom: 50%;float: left;background: #123;}

.box2 {width: 50%;padding-bottom: 25%;float: right;background: #234;}

.box3 {width: 50%;padding-bottom: 25%;float: right;background: #345;}

总结

对于常见的CSS參数,你可能非常难知道里面的一些好玩的东西,或者看到了也熟视无睹.

在我们遇到一些问题的时候,尤其是布局这样的问题,我们要考虑的是,能不能用CSS解决,而不时一位的去考虑JS.毕竟,JS是用来交互的,而CSS是用来布局的.

FungLeo原创,转载请保留版本号申明,以及首发地址:http://blog.csdn.net/fungleo/article/details/50811589

纯CSS实现移动端常见布局——高度和宽度挂钩的秘密的更多相关文章

  1. 移动端 常见布局CSS3的细节

    结合 Framework7 和ios UI系统,微信weUI,支付宝H5    我们在移动端一些css用法 细节的有了更深的了解: 高斯模糊的显示效果,ios8以上支持,ios8以上0.5px,bac ...

  2. pc端常见布局---垂直居中布局 单元素不定高

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. pc端常见布局---垂直居中布局 单元素定高

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. pc端常见布局样式总结（针对常见的）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. pc端常见布局---水平居中布局 单元素定宽

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. pc端常见布局---水平居中布局 单元素不定宽度

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 纯css隐藏移动端滚动条解决方案（ios上流畅滑动）

    纯css隐藏移动端滚动条解决方案(ios上流畅滑动) html代码展示(直接复制代码保存至本地文件运行即可): <!DOCTYPE html> <html lang="en ...

  8. 纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条

    <!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type=" ...

  9. 纯css隐藏移动端滚动条解决方案（ios上流畅滑动）---转载

    html代码展示(直接复制代码保存至本地文件运行即可): <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

  1. redis的安装、启动、主从配置，以及.Net下StackExchange.Redis的使用

    开门见山,Linux下配个环境真是苦逼死了,这里记录一下,囧 一.环境 服务端:Ubuntu16.04 LTS(虚拟机,redis官方没有window发布版本,而且在Linux下运行更稳定) 客户端: ...

  2. MySQL——基本安装与使用

    基本安装 下载地址:https://dev.mysql.com/downloads/mysql/ 选择解压版本:mysql-5.7.21-winx64.zip 以管理员身份打开cmd(除了安装服务不要 ...

  3. MFC获取各类指针句柄

    最近有些人在问MFC编程一些要点,有一些句柄的获取.指针的获取是常见的问题,本文将对这些问题做以解释,参考了前人的笔录(见reference),希望能够帮助大家更方便地进行MFC程序开发. 一般我们使 ...

  4. java基础学习之垃圾回收机制

    回收过程: 1.发现无用的对象 2.回收无用对象占用的内存的空间. 垃圾回收相关算法: 1.引用计数法 堆中每个对象都有一个引用计数.被引用一次,计数加一.被引用变量值变为null,则计数减一. 到计 ...

  5. Redis系列(六)--为什么这么快？

    Redis作为一个基于key-value的NoSQL数据库,最显著的特点存取速度非常快,官方说可以达到10W OPS,但是Redis为何这么快? 1.开发语言 Redis使用C语言进行编写的,而Uni ...

  6. UVA - 247 Calling Circles（Floyd求传递闭包）

    题目: 思路: 利用Floyd求传递闭包(mp[i][j] = mp[i][j]||(mp[i][k]&&mp[k][j]);),当mp[i][j]=1&&mp[j][ ...

  7. unity问题笔记

    拖放在预制体中的图片等资源,他们的加载需要我们控制吗?我觉得不需要控制,但是如果按照现在的这种方式保存资源到非标准的resources文件下,那怎么加载?ulua的规则是这样查找资源的吗?猜想:客户端 ...

  8. 每日命令：（10）cat

    cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用. 1．命令格式: cat [选项] [文件] ...

  9. THUSC2019滚粗记

    关于\(\mathrm{APIO}\)游记,它咕了... Day -1 \(\mathrm{\_tham}\)今天并没有准备给我们考试,所以机房充斥着过年的气息(雾 下午就要出发了,由于一些众所周知的 ...

  10. Springboot 添加数据源报错

    报错信息如下: Caused by: org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying be ...