css
FE-阿阳
爱学习的程序猿
展开
-
sass for循环转换为 less
问题描述‘抄’组件库的代码时,可能会遇到需要将 sass 代码转换成 less 代码;sass 支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持,但是 less 可以使用函数递归的方式模拟 for 循环解决方案sass代码$component-prefix: 'taroify-';$hd:1;@for $i from 1 through 24 { .#{$component-prefix}flex-item-#{$i} { flex: 0 0 $i原创 2022-03-12 21:40:08 · 1144 阅读 · 0 评论 -
css3 sticky不生效的原因?
问题描述布局时设置了 position: sticky ;发现没有生效,于是找了一下问题的原因;解决方案sticky不生效原因有:父元素设置了overflow:hidden或者overflow:auto未指定top、right、bottom、left4个值中的任意一个父元素高度小于sticky定位的元素高度所以:sticky属性依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。元素定位表现为在跨越特定阈值前为相对定位,之后为固定原创 2022-03-03 11:10:18 · 1360 阅读 · 0 评论 -
antd 中 Table 使用问题总结
antd 中 Table 使用问题总结问题描述最近经常遇到 table 的宽度问题,UI 有各种列宽度的需求,这里记录总结下问题结果如果只给某些列设置 width 值,则设置 width 值的列表会有固定宽度,其他列根据内容自适应分配剩余宽度如果给所有列设置 width 值,则所有列根据 width 的比列分配总体宽度如果想达到一列宽度固定,其他列平分布局,可以巧用 fixed 属性,比如最后一列设置 fixed: ‘right’ 属性,给 Table 设置 scroll={{ x: 1200原创 2021-08-04 16:01:58 · 887 阅读 · 0 评论 -
flexible.px2rem
需求场景:现在大部分M站的页面布局都是通过 flexible 的方案解决,flexible.js 里面提供了 px2rem 的函数方法,有些页面需要 js 中动态转换 px 为 rem 给元素设置样式,这时候就有两种方案:自己写一个函数方法,使用 flexible 提供的 px2rem;本着图省事的方案,采用直接找 flexible 的方法。但是竟然在 window 下没找到。问题排查过程:第一步,在 index.ejs 中找到了 flexible 的初始化代码,并且把 flexible原创 2021-06-06 17:04:19 · 341 阅读 · 0 评论 -
修改 input,textarea disabled 颜色
修改 input,textarea disabled 颜色问题描述业务中经常有需求需要修改 input,textarea disabled 颜色。解决方案input:disabled, textarea:disabled{ opacity: 1; -webkit-text-fill-color: #222222;}原创 2021-01-17 17:58:24 · 2117 阅读 · 0 评论 -
安卓手机聚焦键盘挡住输入框
安卓手机聚焦键盘挡住输入框问题描述部分安卓手机聚焦,键盘会挡住输入框。以下是解决方案;解决方案<input class="item-input" v-model="cusTel" type="tel" @focus="focusScroll($event)" @input="limitInput($event, 'cusTel', 11)" placeholder="请输入您的手机号">// 输入框聚焦滑动focusScroll(e) { le原创 2021-01-17 17:42:23 · 265 阅读 · 0 评论 -
元素 float 不起作用
元素 float 不起作用问题描述css 设置元素 float 不起作用;解决方案影响元素 float 样式的因素会有很多,这里提两个:看元素父级有没有设置 display:flex,会使子元素的 float 失效;检查元素有没有因为需要设置超出省略而设置 display: -webkit-box; 也会使元素的 float 失效;...原创 2021-01-17 16:58:20 · 2805 阅读 · 1 评论 -
安卓机 H5 页面加粗样式没有效果
安卓机 H5 页面加粗样式没有效果问题描述部分安卓机 h5 页面 css 设置加粗没有效果;解决方案这种情况的原因是部分安卓机对 font-weigth 的兼容问题;font-weight 需要设置 700 以上,才会起作用;不要用 数字 500 和600;bold 默认 700;...原创 2021-01-17 16:17:40 · 2627 阅读 · 0 评论 -
弹窗里面滚动穿透问题完美解决
弹窗里面滚动穿透问题完美解决问题描述在业务场景中经常会有页面有个弹窗操作,滑动弹窗滚动穿透到页面,页面在滚动,有些强迫症(难说话)的产品是不能接受的,就需要咱们研发想办法解决了。解决方案其实好多人都遇到这种问题,所以解决方案也比较多,但是那种方案是比较完美的呢。方案一:很多人第一思路是禁止滚动穿透去解决,在弹窗上面阻止滑动事件冒泡,这样的能解决弹窗文案少的场景,如果弹窗内本身需要滑动,比如:有 textarea 标签的输入需求,就会出问题了。方案二:下面代码完美解决:// css 设置 .原创 2020-05-29 15:20:15 · 2261 阅读 · 0 评论 -
input、textarea输入框去除默认样式内阴影
input、textarea输入框去除默认样式内阴影问题描述在 ios 系统中,输入框都有内阴影,需要去除。解决方案-webkit-appearance: none ; //是为了去除内阴影样式,但是缺点是不可输入;-webkit-user-select: auto; // 解决输入问题;...原创 2020-04-29 14:55:11 · 1437 阅读 · 1 评论 -
小程序 ios 全面屏底部留出安全距离
小程序 ios 全面屏底部留出安全距离问题描述对于苹果手机,底部有安全距离,一些底部会有遮挡,当然可以通过过去系统信息动态设置底部距离。下面提供一个用 css 设置底部安全距离的方案解决方案苹果官方推荐使用env(),constant()来适配,建议使用该方案,不需要管数值具体是多少。这2个方法是什么呢?env()和constant(),是IOS11新增特性,Webkit的css函数...原创 2020-04-29 14:12:30 · 8781 阅读 · 0 评论 -
纯CSS导航栏下划线滑动效果
纯CSS导航栏下划线滑动效果问题描述面向 C 端的产品嘛,总有一些动效想要提高用户体验,以下是用纯 css 实现导航栏选中下划线滑动效果解决方案以下是实现效果:主要代码如下:<template> <section id="J_list_wrapper" class="list-wrapper"> <nav class="nav-bar-wrappe...原创 2020-02-05 16:27:00 · 2186 阅读 · 0 评论 -
超出最大距离,背景渐变
超出最大距离,背景渐变问题描述有的时候项目中有以下需求,如下图:当字数超出一定距离需要用渐变的效果;问题分析这种效果其实有很多种方式实现,比如:给元素设置最大长度,当页面渲染完成之后,判断元素的宽度是否达到最大宽度,给元素后面加一个渐变的背景盖在文字上;但是这种方式不太灵活,我们的需求是这个渐变是根据页面的主题色来的,是随时可配置的;解决方案以下是用 css 的解决方案达到...原创 2019-11-07 15:51:10 · 246 阅读 · 0 评论 -
Autoprefixer applies control comment to whole block, not to next rules
Autoprefixer applies control comment to whole block, not to next rules.问题描述多行文本省略号如下写,会报 Warning:Autoprefixer applies control comment to whole block, not to next rules..wrap{ overflow: hidden;...原创 2019-10-09 15:45:09 · 653 阅读 · 0 评论 -
rem单位border-radius:50%在安卓手机中画圆变形
rem单位border-radius:50%在安卓手机中画圆变形问题描述使用border-radius:50%,或者border-radius的值与宽高相等,都可实现一个完美的圆形,但是在不同的安卓手机中,会有不同程度的变形(有的扁圆,有的大,有的小);当使用px做为宽高的单位,border-radius:50%画出来的圆是不会变形的;但使用rem时,rem在换算为px时,会是一个带小数点的值...原创 2019-08-13 13:50:28 · 767 阅读 · 0 评论 -
微信小程序设置超出行显示 ... 与展开更多按钮
微信小程序设置超出行显示 ... 与展开更多按钮问题描述业务开发中会有一些场景,超出一行显示 … 与展开更多按钮,展开更多按钮可以切换显示一行还是全部内容,少于一行正常显示;解决方案分析下问题: 一般这种需求不好实现的原因是,在移动端,每行显示的字数的有可能在不同机型会有差异,所以就使开发者无法知道这些内容是否超过一行,是否该显示展开更多按钮。绕开上述原因,曲线救国,我们在每次页面渲染完...原创 2019-04-11 22:17:06 · 17929 阅读 · 0 评论 -
微信小程序设置超出隐藏,点击加载更多实现动画效果
微信小程序设置超出隐藏,点击加载更多实现动画效果问题描述业务开发中经常会有一些场景,以商品订单场景为例,少于两个商品,不显示更多按钮,超过两个显示更多,点击展开,商品全部展示,并且有渐变动画效果解决方案Tips:先说下自己当时的误区的纠正:动画的发生需要满足以下条件:实现动画的元素 css 属性写上了 transition 属性,并且值设置正确(具体值代表什么,自行百度)元素需要实...原创 2019-04-10 23:42:27 · 4434 阅读 · 0 评论 -
微信小程序 1rpx border ios 真机显示不全
微信小程序 1rpx border ios 真机显示不全问题描述在微信小程序的原生页面,ios 真机上 1rpx border 会出现个别边显示不全的情况;解决方案这里先放上问题直通车:微信小程序1rpx border ios真机显示不全问题分析及解决方案经过分析:当标签的父容器宽度(单位rpx)÷2的值为偶数或偶数.5的时候会出现该bug,那么我们可以推到出用200.5*2=401,3...转载 2019-01-20 22:50:47 · 2479 阅读 · 0 评论 -
position 设置属性 absolute 之后,width 的值出现不固定
position 设置属性 absolute 之后,width 的值出现不固定问题描述页面布局中有一些场景需要设置盒子的 css 样式 position:absolute,但是之后不设置 width 的具体值,会出现意想不到的宽度,出现折行啊等样式错乱解决方案原因是当设置了 position:absolute 之后,该元素的witdh、height会根据父元素(需设置position:r...原创 2018-12-22 12:33:55 · 8140 阅读 · 6 评论 -
微信小程序输入框会字体显示不全或者换行
微信小程序输入框会字体显示不全或者换行问题描述 有的时候不同的设备上会出现微信小程序输入框表现不一致,比如:换行,字体显示不全解决方案用开发者工具调试发现,input,textarea 有默认的 weight or height,并且是 rem 为单位,所以会在不同设备出现不同的表现的形式。 原因找到了,解决方法就是覆盖掉默认样式就ok;...原创 2018-09-06 15:06:39 · 9775 阅读 · 0 评论 -
荣耀 10 字体显示错误,顶部部分遮掩
荣耀 10 字体显示错误,顶部部分遮掩问题描述 华为荣耀 10 机型上出现字体被显示不全,顶部被遮掩,其他大部分手机正常。解决方案给相关字体的容器设置了 padding-top:1px(1px只是意思一下);然后就恢复正常,原因不明。...原创 2018-07-11 16:23:03 · 1153 阅读 · 0 评论 -
布局垂直对齐的方式
布局垂直对齐的方式详情描述左右容器分别设置display:table-cell;vertical-align:middle;左右容器分别设置display:inline-block;vertical-align:middle;注意: display:table-cell属性指让标签元素以表格单元格的形式呈现,可以实现元素的垂直居中对齐(vertical-align:middle;原创 2018-01-31 08:41:37 · 480 阅读 · 0 评论 -
flex布局中的注意事项
flex布局中的注意事项详情描述父级设置:display: flex;flex-wrap: wrap(超出部分换行,no-wrap 不换行wrap : 第一行在上面;wrap-reverse: 换行,第一行在下面);子集纵轴排列会默认每个项目两侧的间隔相等,项目之间的间隔比项目之间的边框的间隔大一倍;如果需要清除默认样式的影响,则设置justify-content: flex-star原创 2018-01-31 09:31:22 · 397 阅读 · 0 评论 -
移动端 border 问题
移动端 border 问题详情描述在移动端布局中,经常使用 rem 单位,但是 border 使用热门单位时会有兼容性, 比如魅族手机浏览器,ios 部分系统;border 不显示;可以使用 px 布局;原创 2018-01-31 09:45:56 · 513 阅读 · 0 评论 -
滚动穿透问题
滚动穿透问题详情描述解决方法: 1. 在弹层出现时给body设置position:fixed,top:-滚动条高度;弹层消失的时候获取body的top,$(window).scrollTop(-body的高度)。解决大部分场景,在ios微信浏览器无法禁止微信浏览器原生的弹性黑层; 2. 用iscroll.js+禁止touch事件(唯医答题用的方法)解决原创 2018-02-02 08:12:05 · 222 阅读 · 0 评论 -
h5 视频中的坑
h5 视频中的坑详情描述参考自此链接 以及乔的ppt; 1. 自动播放问题: 通过autoplay属性 视频的自动播放需要在video标签上添加autoplay属性, 如:\\ 但是在很多浏览器里,如 iOS 下并不支持这个属性,在 iOS下必须给webview设置 self.wView.allowsInlineMediaPlayback = YES;self.wView.med原创 2018-02-02 08:13:34 · 467 阅读 · 0 评论 -
IM中输入框的问题
IM中输入框的问题 详情描述ios(特别是UC浏览器)对底部fiexd布局,兼容不好,再聚焦的时候fiexd会漂,所以不能用fiexd布局;ios底部输入框用的是relative,absolute会再部分ios机子上全屏感觉有个遮罩层,使全屏不可点,点的时候有个黑色透明的遮罩层闪烁;android 底部输入框用的是absolute,relative 布局在安卓上输入框会覆盖在虚拟键原创 2018-02-05 08:25:09 · 645 阅读 · 0 评论 -
推荐医生头像问题
推荐医生头像问题 问题描述 在ios9.3.2上滑动,图片会变成方形,其他手机没问题,。解决方案推荐医生医生头像,div 里面套了个 img 标签,只给 div 设置 border-radius: 50%;在 ios9.3.2 上滑动,图片会变成方形,其他手机没问题,给img也添加border-radius: 50%;原创 2018-02-05 08:25:52 · 1138 阅读 · 0 评论 -
stick footer 黏性底部
stick footer 黏性底部 问题描述 让底部一直在页面最下面解决方案这种布局就是 stick footer 黏性底部 布局;这里提供两种方案实现以及实现的思路; 思路为有一个 min-height:100% 的元素,围绕这个元素做文章;注意 html 需要设置 height:100%;方案一:footer绝对定位-并加一层父元素html lang="原创 2018-01-29 12:01:13 · 635 阅读 · 0 评论 -
ios9 以下 flex 兼容问题
ios9 以下 flex 兼容问题 详情描述ios9 以下,display:flex 元素的第一级子元素必须是block,否则 flex 布局是不会生效的原创 2018-02-06 08:29:56 · 7664 阅读 · 1 评论 -
ios9 中登录注册多出一条黑线
ios9 中登录注册多出一条黑线 问题描述 ios9中,登录注册页面 input 框左右多一条黑线,border显示不正常解决方案ios9中,登录注册页面 p>input,input 应该脱离文档流,不然会出现左右多一条黑线,border显示不正常;原因不明;原创 2018-02-06 08:30:43 · 247 阅读 · 0 评论 -
im 聊天输入框高度问题
im 聊天输入框高度问题 问题描述 输入框的高度随着字数增多而增高,但是超过一定高度后,不会增高,场景像微信的输入框一样;刚开始使用 autosize.js 控制 textarea ,但是在 ios11 有兼容问题,不断触发聚焦事件;解决方案舍弃 autosize.js ,用纯css + html 实现: 与textarea放一个平级的 pre 标签与 textare原创 2018-02-06 08:32:15 · 588 阅读 · 0 评论 -
上传图片预览图片方向错误
上传图片预览图片方向错误 问题描述 ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。解决方案获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正。 利用exif.js读取照片的拍摄信息; 唯医骨科项目中用 canvas 把上传图片转为同等大小的图片显示并进行base64压缩上传;原创 2018-02-06 08:32:55 · 2000 阅读 · 0 评论 -
img 标签边框问题
img 标签边框问题详情描述img标签默认有固定宽高,并且不设置src属性或者src属性=“”时,会有默认边框,想让边框消失的一个解决办法: 利用属性选择器[src=”“]让的 img 的 src 属性为空的透明度设为0;原创 2018-01-30 09:34:02 · 2147 阅读 · 0 评论 -
在微博浏览器上背景问题
在微博浏览器上背景问题 问题描述 在微博浏览器上,页面底部为浅灰色解决方案在微博浏览器上;页面底层不设置背景色,在其父级或者body上设置 background-color 为需要的对应的颜色;原创 2018-02-07 08:15:41 · 313 阅读 · 0 评论 -
IE6.0-8.0不支持使用 rgba 模式实现透明度
IE6.0-8.0不支持使用 rgba 模式实现透明度问题描述 IE6.0-8.0不支持使用 rgba 模式实现透明度解决方案可使用 IE 滤镜处理 需要使用filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#88000000, endColorstr=#880原创 2018-02-07 08:16:41 · 343 阅读 · 0 评论 -
移动端页面viewport缩放比不等于1时文本膨胀现象
移动端页面viewport缩放比不等于1时文本膨胀现象问题描述meta name="viewport" content="width=device-width, initial-scale=1">或是:meta name ="viewport" content ="initial-scale=1, maximum-scale=1, minimum-scale=1">原创 2018-02-07 08:19:58 · 327 阅读 · 0 评论 -
ios 手机端 input 框上方有内阴影
ios 手机端 input 框上方有内阴影解决方案方法一:<!--如果 ui 样式里有边框,可以用外层盒子设置边框-->input{ border:none;}方法二://在IOS下,input 和textarea表单默认会有个内阴影,一定程度上影响视觉一致,可通过设置下面代码去掉:input{ -webkit-appeara...原创 2018-06-13 09:54:20 · 5774 阅读 · 0 评论 -
移动端的几种适配
移动端的几种适配详情描述淘宝:使用viewport缩放,通过给html添加 data-dpr=xx, 设置html字体大小,来适配移动端,唯医模仿淘宝;单位使用rem;天猫:禁止viewport缩放,定高不定宽,使用弹性盒子布局;单位使用px;京东:禁止viewport缩放,宽高都使用百分比,设置最大宽度和最小宽度;通过@media媒体查询,设置不同的宽高;单位使用px;小米:禁止原创 2018-01-31 08:24:10 · 528 阅读 · 0 评论