纯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. Android 简单的语音播报

    不解释快上车 Main.class package com.example.myapp; import android.app.AlertDialog;import android.os.Bundle ...

  2. outlook 2016 接收发送无法及时收下邮件，如何更改接收时间？

    1. 单击“文件” > “选项” > “高级” > “发送和接收”,单击”发送/接收“ 2. 组“所有账户”的设置 > 打勾“安排自动发送/接收的时间间隔为(V)” 1 分钟 ...

  3. Python+selenium学习（二） selenium 定位不到元素

    转载:https://www.cnblogs.com/tarrying/p/9681991.html tarrying selenium的三种等待时间 //隐式等待(20秒以内没哥一段时间就会去找元素 ...

  4. zabbix---简介

    zabbix---简介 今天又听人说zabbix,好吧特地回来看了看,和其他的好像差别也不大,不过他可以让监控,绘图,web前端与一体, 当然也可以实现分布式部署,不错的. 列举一下其功能特点 网络设 ...

  5. win10系统杀毒功能

    最近很多客户的电脑都是win10的,部署web服务时用到的破解软件(exe文件),经常被当成病毒杀死,今天发现可以在杀毒记录里找到刚刚被杀掉的文件,然后点击操作,点击允许,再运行时就可以畅通无阻了

  6. CodeFrist基础

    Code First(代码先行).它思想就是先定义模型中的类,再通过这些类生成数据库.这种开发模式适合于全新的项目,它使得我们可以以代码为核心进行设计而不是先构造数据库. EF中创建数据库的表必须要有 ...

  7. BZOJ1996: [Hnoi2010]chorus 合唱队 (DP)

    就是想水一发 #include <stdio.h> #include <algorithm> #include <iostream> using namespace ...

  8. wpf mvvm模式下 在ViewModel关闭view

    本文只是博主用来记录笔记,误喷 使用到到了MVVM中消息通知功能 第一步:在需要关闭窗体中注册消息 public UserView() { this.DataContext = new UserVie ...

  9. 模板—treap

    #include<iostream> #include<cstdio> #include<cstdlib> #define INF 0x7fffffff using ...

  10. 树状数组 & lowbit()

    看了很多大佬的博客,每看一篇博客懂一部分,总算是大概理解了树状数组这个神奇又强大的东西: 在这里我做个整合,把我认为好的部分摘录下来: 参考博客1:https://blog.csdn.net/flus ...