纯CSS实现移动端常见布局——高度和宽度挂钩的秘密
纯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实现移动端常见布局——高度和宽度挂钩的秘密相关推荐
- 移动web开发--移动端常见布局+流式布局和flex布局+携程网首页案例
浏览器私有前缀 为了兼容老版本 私有前缀 -moz- : fixfox 浏览器私有属性 -ms- : ie浏览器私有属性 -webkit- : safari.chrome私有属性 -o- : Oper ...
- pc端常见布局样式总结(针对常见的)
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
- 移动端常见布局方式(流式布局、flex弹性布局、less+rem+媒体查询、Bootstrap)
目录 一:移动端页面 1.流式布局(百分比布局) 2.flex弹性布局(重点♥) flex布局初体验: flex布局原理: flex布局父项常见属性 flex-direction 设置主轴的方向 ♥ ...
- 纯css隐藏移动端滚动条解决方案(ios上流畅滑动)
html代码展示(直接复制代码保存至本地文件运行即可): <!DOCTYPE html> <html lang="en"><head><m ...
- CSS -- 使用纯CSS绘制三角形及常见案例汇总
文章目录 1. 绘制原理 2. 绘制最简单的三角形 3. 绘制对话框 4. 绘制两条直角边不等长的三角形 1. 绘制原理 网页中常见一些三角形,使用 CSS 直接画出来就可以,不必做成图片或者字体图标 ...
- 纯css实现移动端横向滑动列表
<!DOCTYPE html> <html> <head><title>横向滑动</title><style type="t ...
- 纯css手机移动端可滚动的导航代码
<head><meta charset="utf-8"><meta name="viewport" content="i ...
- 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)
所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 1. 基于传统的position和m ...
- html自动适应布局,用纯CSS实现自适应布局表格
以手机.平板等移动设备为平台的浏览行为变得越来越平常,甚至有些人叫嚣PC将死.虽然说的有些夸张,但让你的网站布局能够兼容PC和移动设备这些需求变得越来越重要.这种网页布局就是"自适应布局&q ...
最新文章
- win8--PPTP教程
- asm和file system之间数据文件的转换
- 重磅!四部委发文,以后买房可以省几十万元!
- python find函数 和index的区别_find方法和index方法的区别
- 汉堡菜单_汉堡菜单-可访问性和用户体验设计原则的挑战?
- 深浅克隆面试题汇总——附详细答案
- 开发实践丨用小熊派STM32开发板模拟自动售货机
- MeteoInfoLab脚本示例:MODIS Sinusoidal投影HDF数据
- 你知道关闭页面时怎么向后台发送消息吗?
- SQL Server2012数据库的备份和还原
- 477.汉明距离总和
- 由VB的KeyCode和KeyAscii到扫描码、虚拟码的思考
- 数据库高级查询与性能优化1,开窗函数与子查询
- 剧本写作app——Final Draft,帮你创建专业的主流编剧格式!
- pymysql操作MySQL数据库表-----爬虫豆瓣top250电影并存入数据库
- 计算机表格中减法公式,excel表格减法公式
- idea中更换java版本
- VS2015 解决 “有太多的错误导致IntelliSense引擎无法正常工作,其中有些错误无法在编辑其中查看”问题
- 人脸、微笑、口罩识别
- 虚拟机安装centeros7镜像