纯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. TypeError: string indices must be integers, not str

    1. TypeError: string indices must be integers, not str 字符串类型取第index个字符的时候,应该传入int而不是str.如 1 a='abcde ...

  2. Python多线程爬图&Scrapy框架爬图

    一.背景 对于日常Python爬虫由于效率问题,本次测试使用多线程和Scrapy框架来实现抓取斗图啦表情.由于IO操作不使用CPU,对于IO密集(磁盘IO/网络IO/人机交互IO)型适合用多线程,对于 ...

  3. php第二十三节课

    XML XML:页面之间传递数据,跨平台传递 HTML:超文本标记语言,核心标签 XML特点:1.标签名可以自己定义2.有且只有一个根3.大小写敏感4.标签必须完整 <!DOCTYPE html ...

  4. 剑指offer---正则表达式匹配

    题目:正则表达式匹配 要求:请实现一个函数用来匹配包括'.'和'*'的正则表达式.模式中的字符'.'表示任意一个字符,而'*'表示它前面的字符可以出现任意次(包含0次). 在本题中,匹配是指字符串的所 ...

  5. java环境初级部署及项目搭建

    一.网页地址 Java各版本下载地址: http://www.oracle.com/technetwork/cn/java/archive-139210-zhs.html Eclipse官方下载地址: ...

  6. linux(Ubuntu16)下切换python2和python3(转)

    采用update-alternatives 切换版本 1.打开终端:Ctrl+Alt+T 2.查看update-alternatives的帮助信息:update-alternatives --help ...

  7. git 安装 使用

    git 安装--------------------------------------yum install git -y git 下载项目----------------------------- ...

  8. Django DTL模板语法中的循环

    from django.shortcuts import render def index(request): context={ 'books':[ '5年高考3年模拟', '家猪养殖与配种', ' ...

  9. vuex----------state的基础用法

    先使用vue cli构建一个自己的vue项目 1.npm i -g vue-cli 2.vue init webpack sell (sell是你的项目名) 3.一路回车(在这个过程中会提示你是否安装 ...

  10. 洛谷 1062 NOIP2006普及T4 数列

    [题解] 鲜活的水题..我们把数列换成k进制的,发现数列是001,010,011,100,101,110,111...,而第m项用k进制表示的01串刚好就是m的二进制的01串.于是我们预处理k的幂,把 ...