常见工作中遇到的问题

（1）1px 方案
做过移动端需求的前端肯定是避免不了处理 1px 细线问题，这个问题的原因就是 UI 对页面美观度的要求越来越高（不要和我说这是 retina 屏的问题）

.min-device-pixel-ratio(@scale2, @scale3) {@media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {transform: @scale2;}@media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {transform: @scale3;}
}.border-1px(@color: #DDD, @radius: 2PX, @style: solid) {&::before {content: "";pointer-events: none;display: block;position: absolute;left: 0;top: 0;transform-origin: 0 0;border: 1PX @style @color;border-radius: @radius;box-sizing: border-box;width: 100%;height: 100%;@media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {width: 200%;height: 200%;border-radius: @radius * 2;transform: scale(.5);}@media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {width: 300%;height: 300%;border-radius: @radius * 3;transform: scale(.33);}}
}.border-top-1px(@color: #DDD, @style: solid) {&::before {content: "";position: absolute;left: 0;top: 0;width: 100%;border-top: 1Px @style @color;transform-origin: 0 0;.min-device-pixel-ratio(scaleY(.5), scaleY(.33));}
}

(2)内联首屏关键 CSS
我们要做的优化就是找出渲染首屏的最小 CSS 集合（Critical CSS），并把它们写到部分，从而让浏览器接收到 HTML 文件后就尽快渲染出页面。对于剩余部分的 CSS，我们可以使用异步的方式进行加载。对于如何判断哪些 CSS 是首屏渲染需要的，我们需要通过分析 DOM 结构来确定。

<!doctype html> <html><head> <style> /* inlined critical CSS */ </style><script> loadCSS('non-critical.css'); </script> </head> <body> ...body goes here </body> </html>

在上面的代码中，我们取出首屏渲染所必须的 critical CSS，以内联的方式写在之中，然后使用 loadCSS() 异步加载剩余部分的 CSS 样式，这相当于离线加载剩余部分的 CSS 样式，然后在后台将其注入到页面中。

(3)文字两端对齐
需求中我们也经常遇到这样的需求，这里直接提供方案

// html
<div>姓名</div>
<div>手机号码</div>
<div>账号</div>
<div>密码</div>// css
div {margin: 10px 0; width: 100px;border: 1px solid red;text-align: justify;text-align-last:justify;
}

(4)浏览器会从右到左解析 CSS 选择器

(5)Text-Transform 简单介绍

**(6)~ 和 + 两个选择器 **

常见工作中遇到的问题相关推荐

软件测试工作中常见的问题
如果你是从事软件测试工作的,在工作中经常会纠结于一些问题,只有通过一定时间的积累,才会摸清楚这些问题的关键所在. 本文就带大家一起来总结在工作常见的问题,后续会持续更新. 一.测试团队的工作也依赖于业 ...
运维工作中常见的一些定律
以下是我在工作中积累的,和运维工作相关的一些定律,接下来,我会对各个定律分别展开进行阐述,从而加深大家的理解一万小时定律,要在任何领域成为大师,一般需要约10年的艰苦努力墨菲定律,如果事情有变坏的 ...
excel表格打印每页都有表头_表头如何自动编号？日常工作中的表格打印常见问题解答...
打印是我们学习与工作中需要经常用到的. 对于很多人来说,打印就是一件「放放纸张,点点打印机,没有什么技术含量」的事. 但 Excel 表格的打印可没有你想象的那么简单-- 今天小管家就来教你如何打印E ...
工作中常见的开会问题
这是学习笔记的第 1834篇文章工作中开会是不可避免的,但是显然很多公司陷入了重度开会状态,最后搞得大家都很累. 开会的问题主要体现在两点,会议质量不高,会议时间过长. 会议质量不高主要表现在大家对 ...
那些职场工作中常见的定律
职场有其自身的规则和定律,往往人们就是围绕这些定律在生活和努力,当然也有些人想要去改变它,结果也不尽相同,少数人取得了成功,大多数人则是被扫地出门,对于职场中的新人来讲你要知道职场中的一些规则,否则你 ...
实战！工作中常用到哪些设计模式
前言平时我们写代码呢,多数情况都是流水线式写代码,基本就可以实现业务逻辑了.如何在写代码中找到乐趣呢,我觉得,最好的方式就是:使用设计模式优化自己的业务代码.今天跟大家聊聊日常工作中,我都使用过哪些 ...
python在日常工作处理中的应用-python在工作中的应用场景介绍
python在工作中的应用场景介绍发布时间:2020-04-21 14:44:30 来源:亿速云阅读:277 作者:小新今天小编给大家分享的是python在工作中的应用场景介绍,相信很多人都不太 ...
工作中涉及运维知识点的汇总
对工作中常见运维知识点的一个简单汇总 0)设置阿里云pip源,加速pip更新速度 mkdir ~/.pip #创建文件夹 vi ~/.pip/pip.conf #添加如下内容 [global] ind ...
iPIN CEO 杨洋：AI 还未被大规模用在工作中，缺的是认知智能
iPIN CEO 杨洋:AI 还未被大规模用在工作中,缺的是认知智能本文作者:叨叨 2017-08-06 10:49 导语:如果一个技术不能解决问题,是没有价值的. 雷锋网(公众号:雷锋网)按:8 ...

常见工作中遇到的问题

常见工作中遇到的问题相关推荐

最新文章

热门文章