css
css知识
头发超多的程序媛
这个作者很懒,什么都没留下…
展开
-
Less适配设备屏幕
//适配主流设备十几种@adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;//设计稿尺寸@psdWidth:750px;//预设基准值@baseFontSize:100px;//设备的种类@len:length(@adapterDeviceList);//适配函数.adapterMixin(@index) when ( @index > 0){ @me原创 2021-08-16 17:32:36 · 217 阅读 · 0 评论 -
详解瀑布流布局的5种实现方式及object-fit
最近项目中需要处理与图片相关的布局,不得不说图片这玩意真想要得到完美的展示效果还真是要费些力气。因为图片的尺寸或者比例各不相同。所以想要不同尺寸的图片有好的显示效果,你就需要找到适合的方式。而且图片往往是不可或缺元素。毕竟一图胜千言,有时候图片能给带来非常好的效果。比如我们每天都会使用的表情包,它往往能够表达出我们无法用文字描述的信息,还比如我们经常在公众号里看到的漫画虽然短短几个字,但是却能够让我们看的不亦乐乎。当然如果我们做图片网站的,那图片的处理就是绕不开的话题了。因对图片的处理经验不多,所以就转载 2021-07-15 14:39:00 · 505 阅读 · 0 评论 -
小程序包括uniapp针对安全区域env(safe-area-inset-*)兼容
以前做webapp的时候,在uc手机浏览器及个别浏览器下使用constant(safe-area-inset-top)和env(safe-area-inset-top)会有不兼容情况,甚至出现样式错误于是在:root下去定义css变量。但是小程序或者uniapp下是是不可以的。那么,真的要uni-app 全面屏适配(iphoneX适配)及安全区设置一样写3条css兼容吗?其实不用,将page替换:root即可,上代码page { --safe-area-inset-top: 0px.原创 2021-01-26 12:08:13 · 4465 阅读 · 2 评论 -
移动端适配简单方案
js实现function resetFontSize() { // 1rem = 100px var baseFontSize = 100 // 设计稿宽度 var designWidth = 750 // 设备宽度 var width = window.innerWidth var currentFontSize = (width / designWidth) * baseFontSize document.getElementsByTagName('html')[0].原创 2021-01-26 12:07:50 · 67 阅读 · 0 评论 -
css 生成4个小角
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .siFrame { width: 200px;原创 2021-01-25 12:42:04 · 392 阅读 · 0 评论 -
flex布局文字溢出显示省略号失效的解决方法
css单行文字溢出省略: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100px;css多行文字溢出省略: word-break: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overfl原创 2021-01-25 12:37:15 · 3838 阅读 · 3 评论