分类目录归档:CSS

单屏布局最佳实践

单屏布局,虽然是不太逃开发喜欢的一种模式,但是在用户体验上,有时候却是一个很好的选择,本篇文章,就是来说一下,如何让单屏布局,不那么讨前端开发的讨厌,让单屏布局变得更简单。

device-aspect-ratio与aspect-ratio单屏布局

单屏布局中,知道设备的宽高比是特别重要的,我原则是:可以使用CSS解决的问题,绝对不会去使用JS。

从跑马灯说起

移动端,尤其是手机移动端,因为其区域限制,所能展示的内容是非常有限的,所以对于内容的展示,就变得异常的重要,而有些内容,却无法省略太多,但因其不是很重要的内容,又不能给太大的区域展示,所以这个时候,很多人希望可以以一个跑马灯的形式展示,因为是移动的,也可以顺便吸引一下用户的注意力。

fixed在微信下的BUG

IOS系统和Android系统的H5开发中,总是会碰到各种问题,比如IOS更注重流畅性,所以在滚动的时候,有一个私有的属性(X -webkit-overflow-scrolling),可以让滚动区域变得更像是原生APP的滚动,但既然是私有属性,那么就会出现一些异常,比如在微信中。

IOS系统滚动出现白边

H5页面中,有个很常见的效果,就是自定义的弹窗,而一般在弹窗出现时,就会有一个部分透明的背景,但是你是否在IOS的设置上,碰到过这样的一种情况?

IOS输入框固定

如果您有过移动端的开发经验,那么您是否碰到过这样的问题,一个页面有输入框,当这个输入框聚焦时,输入框在IOS下,被移动到手机屏幕的当中去了,而在Android端,有些浏览器的输入框,会被键盘盖住。

常用属性选择器-灵活布局

当有一种状态,状态种类特别多,状态多变,状态直接会来回变化,当你觉得布局和JS逻辑写起来都有些冗余的时候,尝试使用属性布局吧,会有惊喜的哦!

纯CSS实现border的0.5px设置

在移动端的项目中,为了能有更好的UI视图,很多元素的边框都是设置为0.5px的宽度,而在一些Andriod的设备上,border是无法直接设置为0.5px的,所以通常会使用一些其他的方法,来实现该需求,这里提供一个纯CSS的实现方法,请大家参考。

纯CSS实现元素的自适应上下居中

纯CSS实现元素的上下居中。

纯CSS实现块级框等比显示

关于元素的宽高等比显示的问题,在之前一直没有发现什么好的解决方法,也曾经一度以JS来实现元素的宽高等比的问题,最近偶的灵感,想到了一个更好的解决方法,使用纯CSS实现。