如何在移动端实现纯css的自定义布局？-H5教程-PHP中文网

如何在移动端实现纯css的自定义布局？

php中文网

发布： 2016-06-07 08:43:01

原创

2352人浏览过

如何在移动端实现纯css的自定义布局？
比如在一个移动端页面中，我想要定义一个宽度为80%，高度等于宽度的一个div，之前用js确实没问题，但是我想知道，如何能用css实现。请大神指导。

移动端UI&微信UI YDUI Touch

YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。

查看详情

回复内容：

<span class="nt">div</span><span class="nf">#target</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">80</span><span class="n">vw</span><span class="p">;</span> <span class="k">height</span><span class="o">:</span> <span class="m">80</span><span class="n">vw</span> <span class="p">}</span>

登录后复制

添加一个伪元素，利用 padding-top: 100% 撑开容器实现等宽高。手机码字不便贴代码，具体可以参考我以前的一篇文章： https://idiotwu.me/css-responsive-square/ 我只是对贺老的答案做个资料补充的，并且只提供传送门，七个冷门单位
http://www.admin10000.com/document/5463.html 大致提供个思路，
就是通过红色div，来当个中介。

demo >> A Pen by Joy Youger

. {
width: 80%;
padding-top: 80%;
height: 0%;
} 这个问题无论在 PC 还是移动端，都可以用纯 CSS 来实现..
就是 @Dolphin Wood 所说的方法，我再补充一点，利用 height + padding-top 可以得到一个任意长宽比 的元素.
Responsive background images with fixed or fluid aspect ratios 这篇文章中介绍了此方法..可以详细看一下

贺老说的那种方法，新单位我没用过，查了下兼容性不是很好

补充一下, 利用 height 和 padding-top 可以实现 动态长宽比 (非固定长宽比) 你说的我并不明白~ 什么叫做js实现80%的宽度？你的意思是js来获取页面宽度，然后用js修改css的height值么？搜索下响应式布局。 media query媒体查询！判断浏览器宽度，设置相应的属性！bootstrap建议你去看看CSS源码