NoNo Lee
NoNo Lee
移动端网页开发中，经常会涉及到一些小按钮或者小标签，比如这种： 对于一般 PC 浏览器以及 iOS 设备的浏览器表现就是我们想要的居中效果，但是大部分 Android 设备的浏览器文字都会稍微向上偏离，如下图所示： 测试表明，字体字号为奇数的两倍时（比如 10px、14px、18px、22px、26px），会出现严重偏移现象。 其实系统之间效果的差异跟我们的字体类型、系统排版引擎、浏览器都有关系，其实不影响用户浏览与操作等体验，我们可以忽略这些问题，对于一些居于使用场景偏离的比较明显的，可以使用下面提到的两种处理方案。 ### 方案一： 我们可以通过 transform: scale 来处理，比如，字体大小是 8px，我们把字体设定为 16px，然后通过 scale(0.5) 缩放至一倍大小，简单粗暴。 注意：放大两倍会使得容器被撑开占位。 ### 方案二： 结合行高、对齐的关系，结合伪元素得出的黑科技，亲测效果很理想。 ```css .jd::before { content: '';...
对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。 ## 第一步：设置网页在可视窗口的布局方式 新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口： ```html ``` ## 第二步：页面主体内容限定在安全区域内 ```css body { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } ``` ## 第三步：fixed 元素的适配 类型一：fixed 完全吸底元素（bottom = 0） ```css {...
常见商品组占位图情况： ```css .cover { position: relative; height: 0; overflow: hidden; padding-top: 100%; img { display: block; width: 100%; height: auto; position: absolute; top: 0; left: 0; } } ``` 如果是其他比例的商品图与容器比例不符，可以这样处理：...
所谓 “Sticky Footer”，指的是：如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。 总而言之，就是页脚一直处于最底，效果大致如图所示： 假设我们页面的 HTML 结构是这样： ```html ``` ### 实现方案一：absolute 通过绝对定位处理应该是常见的方案，只要使得页脚一直定位在主容器预留占位位置。 ```css html, body { height: 100%; } .wrapper { position: relative; min-height: 100%; padding-bottom: 50px; box-sizing: border-box; }...
实现如图效果，标签一直跟随在文字后面。如果文字超出一行，文字裁断省略，标签保留在最右。 HTML: ```html 小米官方旗舰店 京东自营 ``` CSS: ```css .jd { margin-right: 60px; /* 对应是标签的宽度 */ white-space: nowrap; span, em { display: inline-block; vertical-align: middle; } span { max-width: 100%; /*...
## 浏览器是如何还在自定义字体的 在自定义字体被渲染出来之前，需要先进行加载，大多数浏览器在字体还未还在出来之前会先隐藏字体，导致网络差的情况下会有一段时间的空白 ## font-display 使用 - auto: 默认值，浏览器默认行为 - swap: 优先显示默认字体或者后备字体，直到自定义字体加载完成后再使用自定义渲染文本 - fallback: auto 与 swap 的折中方案，较短时间内先 auto，如果还未加载完成，再 swap - optional: 与 fallback 类似，但会让浏览器决定是否加载，如果浏览器连接速度慢，字体不会被使用 ```css @font-face { font-family: 'sentyGoldenBell';...
问题场景：微信 iOS 客户端 webview 下 H5 页面**横向**滚动条不隐藏 ## 以往的做法 ```css ::webkit-scrollbar { display: none; } ``` ## 但是 微信 webview 内核由 UIWebView 升级到新内核 WKWebView 后，就不生效了 > 问题分析：只要添加了 -webkit-overflow-scrolling: touch 平滑滚动属性，隐藏滚动条样式就会失效。...
如下图几种场景，实现英文字母与中文字母两端对齐，且英文字符需要做到均分： 可以通过两种方案实现： ### 方案一： 通过 flex 布局的 `justify-content: space-between;`属性实现两端对齐，项目之间的间隔都相等。 ```html JDGW ``` ```css .jd { display: flex; } .jd i { width: 1em; justify-content: space-between; } ``` ### 方案二（黑科技）： 需要均分的字符间需要有一个空格进行字符之间的分离，结合...
实现商品组内标签模块的适配问题，如图效果： HTML 结构如下： ```html 标签 ... ... ``` 核心 SASS 代码： ```sass .mall_recommend_tags { position: relative; /* 这里模拟 cover 的高度 */ &::before { content: '\20'; display: block; padding-top: 100%; height:...
> :empty 选择器匹配没有子元素（包括文本节点）的每个元素。 这里举个小红点的例子： 如图所示，小红点有内容以及无内容的样式差异，按照常规的处理方式，我们一般是通过类名区分，但是我们可以简单通过`:empty`选择器区分开。 ```html 3 ``` ```css .jd i:empty { // 无内容的小红点样式 } .jd i:not(:empty) { // 有内容的小红点样式 } ```