Windows对俄“断供”，国产操作系统还好用吗？

纵观Windows发展历程，其能成长为桌面操作系统“霸主”，源于Wintel（即windows+intel）联盟搭建的强大硬件生态，以及后期形成的庞杂软件生态。

2018年，微软曾公布Windows应用数量，相比其他桌面OS平台可谓一骑绝尘：Windows10月活设备数超过7亿台，适配应用程序超过3500万个，软件版本超过1.75亿个，硬件/驱动组合1600万件。

在这样的背景下，兼容Windows应用，成为追求“好用”的国产操作系统绕不过的“坎”。值得期待的是，目前主流国产操作系统，均表示已开启“兼容”Windows应用的技能点。

例如，统信软件基于开源wine技术方案和自研优化补丁，已实现Windows平台软件在统信UOS平台的正常运行。

银河麒麟操作系统应用虚拟化管理软件，可以将标准的Windows应用程序生成为可跨平台发布的虚拟应用。

6月17日，多年来首次公开发新品的中科方德，也随其5.0版本桌面操作系统，同步推出了最新的支持Windows应用软件兼容运行的“方德鸳鸯火锅平台8.0”。技术原理上“鸳鸯火锅平台”是通过对Windows应用所依赖环境组件和应用编程接口（API）的模拟支持实现应用运行。

目前，“鸳鸯火锅平台8.0”可支持超万款Windows应用软件，包括常见的微软Visio、微信、QQ、Foxmail、PhotoShop等。

“方德操作系统基于开源操作系统Linux内核开发，使用流畅度跟Windows相比并没有什么区别。”《科工力量》专栏作者铁流告诉观察者网，近日，他实测了中科方德桌面操作系统，运行了WPS、PPT、EXCLE、微信等日常办公常用软件，感觉良好。

不过，只支持这些日常应用软件是不够的，CAD、CAE、CAM等部分制造业关键行业应用只有Windows版本仍是现阶段无法回避的现实。

“软硬结合”支撑大型软件

由于历史原因，国内外主流的商业、工业、设计类软件大多基于Windows平台开发，和linux做适配的较少，国产桌面操作系统自然也无法运行这些大型软件。

逆向适配大型软件的难度不言而喻，但另一方面，国内制造业对大型软件的需求却在不断上上升。

赛迪工业和信息化研究院CCID数据显示，我国研发设计类工业软件市场规模2018年为142.7亿元，2021年达到223.9亿元，我国研发设计类工业软件的市场规模稳步提升。

因此，国产操作系统要想做到好用，无疑需要支持大型商业应用。而支持大型应用，除了软件适配外，更重要的是硬件系统的性能也要支撑的住。

x86架构，作为市场上主流的个人PC、数据中心架构，长期以来就是大型应用的主要首选开发场景，国产操作系统支持大型应用，绕不开与x86架构特别是国产x86硬件设备做深入优化。

经过与国产x86硬件平台的深入融合，目前方德鸳鸯火锅平台8.0可支持国内外主流的工业设计仿真、视觉设计、视频制作等大型商业软件。例如国内数码大方、浩辰、中望、华天等厂商的CAD 2D/3D、CAM等工业设计软件，以及Catia、Creo、Solidworks、Simense UG NX、AutoCAD、Adobe等常用的国际商业软件。

“可控”与“可靠”

大型应用可以兼容了，操作系统的安全性与稳定性又顺理成章成为了用户的“刚需”。

一款好用的国产操作系统，最关键两个标准是“可控”与“可靠”。

评判是否可控，一是要看是否掌握核心代码，二是要看是否拥有健全的安全体系。在这方面，国产操作系统也下足了功夫。

例如，统信软件与国内系统安全厂商合作，定期漏洞扫描自检，及时修复更新，同步上游CVE漏洞库。

银河麒麟V10可提供核内外一体化防护的安全体系，实现自研Kysec、BOX等安全机制和开源强访控制兼容管控等。

方德桌面操作系统5.0和其“火锅平台8.0”，也协同建立了双安全的机制，在操作系统侧进行权限管理，在火锅平台侧建立安全沙箱机制，提前来阻断安全风险。其底层代码在开源基础上进行了深入和长期的自研，平台上并不运行Windows，可从根本上屏蔽Windows的安全漏洞。

从设计角度，方德和底层的国产芯片密切结合，进行了自底向上的安全机制体系设计与原生可信计算机制，支持各类加密芯片和安全组件，可满足等保2.0的要求。

而评判一款操作系统是否可靠，则要看是否经过大量验证试验，能否满足不同场景使用。

在可靠性方面，方德产品在研发和出厂的过程中经历了严苛的测试实验，例如高强度的重启测试、长时间循环 高清视频的压力测试等。同时，从预防的角度，方德对关键系统的数据备份保障也提供了完整的解决方案。

结语：

不管Windows是否断供，主流国产操作系统，相比早先版本无疑已算好用，但要追上Windows等海外巨头、实现完全市场化发展，挑战依旧严峻。

为更好发展，国产操作系统厂商研发产品，需同时考虑增量和存量应用问题，兼顾安全和发展。在保障安全性上，通过国产操作系统标准建设、开源社区、上下游合作等，争取基于国产操作系统、国产芯片开发更多的原生新应用，带动国产信息技术应用的整体水平。

在兼顾发展上，也要考虑对于存量应用尤其是主流大型商业软件的支持，否则产业和经济发展会面临断档倒退的风险，“兼容并包”或许是国产软硬件发展更现实有效的路径。

业内有观点认为，操作系统每过二十年左右会出现一次跨越式发展机遇，而如今外部、内部环境也处在巨大的变化周期中，扎实做好技术、做好应用的国产操作系统，未来表现值得期待。

【前端词典】提高幸福感的 9 个 CSS 技巧

前言

在这篇文章我会介绍 9 个使你的 CSS 更加简洁优雅的使用技巧。这些技巧小生经常使用，觉得挺高效实用，所以也就有了这篇文章。

9 个 CSS 技巧

特此声明，这里说的 CSS 并不止包含 CSS，也包含 CSS 预处理器（Less Sass 等），愿各位看官不要纠结于此。

正文现在开始。

1. 尽量使用 padding 代替 margin

我们在设计稿还原的时候， padding 和 margin 两个是常用的属性，但我们知道属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠，所以如果 margin 使用的过于频繁的时候，Box 的垂直距离可能就会发生重叠。

还有一个问题就是第一个子元素的 margin-top 值会加在父元素上的 bug（最后一个子元素的 margin-bottom 也存在类似的问题）。这里是不是有人问为什么呢？

原因就在于：

the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

翻译过来就是:

所有毗邻的两个或多个盒元素的 margin 将会合并为一个 margin 共享。 毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、 Padding 或 Border 分隔。

至于为什么合并我个人觉得这和排队取款的安全距离有点类似，人与人之间的安全距离是 1m，如果安全距离不合并，那么我们在排队的时候是不是人与人的距离就变成 2m 了。当然很可能不是这个原因。

所以我们可以在首位元素使用 padding 来替代 margin。当然有的时候使用 padding 不能满足需求，这时你也可以在“非空内容”这个条件做文章。即在父元素添加一个伪元素。

所以我们在使用 margin 的时候一定要注意 collapsing margins 问题。

2. position:fixed 降级问题

不知道曾经的你是不是遇到吸顶效果，就是使用 position:fixed 这个属性。其实如果其父元素中有使用 transform， fixed 的效果会降级为 absolute。

解决方案：

既然会降级为 absolute 效果，我们该怎么解决这个问题呢？我们就改考虑什么情况下 fixed 和 absolute 的表现效果会是一样的。

即当使用 fixed 的直接父元素的高度和屏幕的高度相同时 fixed 和 absolute 的表现效果会是一样的。

如果这个直接父级内的元素存在滚动的情况，那就加上 overflow-y:auto。

3. 合理使用 px | em | rem | % 等单位

在 CSS 中有许多距离单位，比如 px | em | rem | %，还有 CSS3 中的 vh | vw 等单位。

那么我们在项目中应该如何使用呢？我们在 pc 端不需要考虑的这么复杂，所以这里我们主要讲讲这些单位在移动端中的使用。

基础单位 px

px 是我们最早接触到的单位了，不过我们在移动端自适应的要求下，使用的频率不是很高；我总结了以下使用的情况：

比较小的图案

比如需要我们画一个 r 为 5px 的圆，如果我们使用 rem 作为单位，我们很快会发现在一些机型上的图案不圆，会呈现椭圆形。这是由于 rem 转 px 会存在精度丢失问题。

所以这个时候我们就需要使用 px 配合 dpr 来实现：

// less 
/*@size 建议取双数*/
.circle(@size, @backgroundColor) {  
    width: @size;
    height: @size;
    background-color: @backgroundColor;
    [data-dpr="1"] & {
        width: @size * 0.5;
        height: @size * 0.5;
    }
    [data-dpr="3"] & {
        width: @size * 1.5;
        height: @size * 1.5;
    }
}

1px 细线问题

这个问题下面我会单独做一小节讲，在这里就不累述。

字体大小（基本都是用 rem 作为单位）

一般情况字体的大小我也会使用 rem 作为单位，因为精度丢失我认为在可以接受的范围之内。

相对单位 rem

rem 是 CSS3 新增的一个相对单位（root em），即相对 HTML 根元素的字体大小的值。

rem 应该是自适应使用的最广泛的单位了。

相对单位 em

em 也是一个相对单位，却是相对当前元素的字体大小。

line-height

一般建议在 line-height 使用 em。因为在需要调整字体大小的时候，只需修改 font-size 的值，而 line-height 已经设置成了相对行高了。

首行缩进两个字符

在存在首行缩进的需求，我也会使用这个单位。

text-indent: 2em

视口单位 vw | vh

vw: 1vw = 视口宽度的 1%

vh: 1vh = 视口高度的 1%

我们知道以 rem 单位设计的弹性布局，是需要在头部加载一段脚本来进行监听分辨率的变化来动态改变根元素字体大小，使得 CSS 与 JS 耦合了在一起。

那么有没有方案解决这个耦合的问题呢？

答案就是视口单位 vw | vh。

以下就是前人给出的使用方案：

$vm_fontsize: 75;
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

4. 合理使用变量

一般设计稿中的某一类的文字（元素）都是用相同的字体大小、颜色、行高等样式属性，所以这些值我们不必每次都重复写，因为当 UI 更新设计方案，你需要改的地方就很多了。这些重复使用的值我们完全可以存放在变量里面。

Sass 和 Less 稍微有点区别：

// sass
$direction: left;
// less
@direction: left;

当然 CSS 原生也是存在变量的，使用规则如下：

变量定义的语法是： --； // *为变量名称。

变量使用的语法是：var()；

无论是变量的定义和使用只能在声明块 {} 里面

CSS 变量字符限制为： [0-9]、[a-zA-Z]、_、-、中文和韩文等。

:root {
    --blue_color: #3388ff;
    --main_bgcolor: #fafafa;
    --font_size_12: 12px;
    --font_size_14: 14px;
    --color: 20px;
}
.div1{
    background-color: var(--main_bgcolor);
    font-size: var(--font_size_12);
}

5. 使用 Mixin 归类重复样式

和重复变量一样，重复的样式也可以归类。我觉得优秀的代码其中有一条肯定是代码的复用性强。

之前我们写 CSS 的时候，也会将一些重复使用的代码放在一个 class 中，这样的确达到了一定的复用性，不过最后的效果可能就是在一个元素里面放了很多 class，如下图：

这样下一个接手得人难免会有点迷糊，而且这样会造成样式越来越难修改。

这个时候，mixin( 可以理解成 class 中的 class )就能发挥它的作用了。

这是一个描述性文字的样式：

.font-description {
    .font-des-style(24px,#fff,1.5em);
    .line-camp(2);
}

// less
/* 多行显示 */
.line-camp( @clamp:2 ) {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: @clamp;
    -webkit-box-orient: vertical; 
}

.font-des-style( @fontSize, @color, @lineHeight, @textAlign:left ) {
    font-size: @fontSize;
    color: @color;
    line-height: @lineHeight;
    text-align: @textAlign;
}

这只是一个简单的例子，我们可以把可复用的样式放在 mixin 中，这样接手项目的人只需要熟悉你写的 mixin.less 就可以开始迭代需求了。

6. 1px 方案

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

据小生所知好像没有什么兼容性特别好的方案，这里我只是提供两种种相对较好的方案。

使用伪类 + transform

.border_bottom { 
    overflow: hidden; 
    position: relative; 
    border: none!important; 
}
.border_bottom:after { 
    content: ".";
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    height: 1px; 
    background-color: #d4d6d7; 
    -webkit-transform-origin: 0 0;  
    transform-origin: 0 0; 
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

当然这个方案在一些版本较低的机型也是会出现粗细不均、细线消失断裂的兼容性问题。不过现在在已经 2019 年了，版本较低的机型也淘汰的差不多了。

使用 box-shadow 模拟

.border_bottom {
  box-shadow: inset 0px -1px 1px -1px #d4d6d7;
}

这个方案基本可以满足所有场景，不过有个缺点也就是颜色会变浅。

7. 从 html 元素继承 box-sizing

在大多数情况下我们在设置元素的 border 和 padding 并不希望改变元素的 width,height 值，这个时候我们就可以为该元素设置 box-sizing:border-box;。

我不希望每次都重写一遍，而是希望他是继承而来的，那么我们可以使用如下代码：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

这样的好处在于他不会覆盖其他组件的 box-sizing 值，又无需为每一个元素重复设置 box-sizing:border-box;。

8. 内联首屏关键 CSS

性能优化中有一个重要的指标 —— 首次有效绘制（FMP），即指页面的首要内容（primary content）出现在屏幕上的时间。这一指标影响用户看到页面前所需等待的时间，而 内联首屏关键 CSS（即 Critical CSS，可以称之为首屏关键 CSS） 能给用户一个更好的心理预期。

如图：

我们知道内联 CSS 能够使浏览器开始页面渲染的时间提前，即在 HTML 下载完成之后就能渲染了。

既然是内联关键 CSS，也就说明我们只会将少部分的 CSS 代码直接写入 HTML 中。至于内联哪些 CSS 你可以使用 Critical。

9. 文字超出省略、文字两端对齐

需求中我们也经常遇到这样的需求，这里直接提供方案。

超出省略

.line-camp( @clamp:2 ) {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: @clamp;
    -webkit-box-orient: vertical; 
}

所遇到的问题：

-webkit-box-orient:vertical 在使用 webpack 打包的时候这段代码会被删除掉，原因是optimize-css-assets-webpack-plugin 这个插件的问题。

解决方案：

可以使用如下的写法：

.line-camp( @clamp:2 ) {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: @clamp;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
}

两端对齐

// html
姓名div>
手机号码div>
账号div>
密码div>

// css
div {
    margin: 10px 0; 
    width: 100px;
    border: 1px solid red;
    text-align-last: justify;
}

效果如下：

前端词典系列

《前端词典》这个系列会持续更新，每一期我都会讲一个出现频率较高的知识点。希望大家在阅读的过程当中可以斧正文中出现不严谨或是错误的地方，本人将不胜感激；若通过本系列而有所得，本人亦将不胜欣喜。

如果你觉得我的文章写的还不错，可以关注我的微信公众号，公众号里会提前剧透呦。

你也可以添加我的微信 wqhhsd， 欢迎交流。

下期预告

在接下来的几篇文章中我会介绍 Vue 相关

"原创写作，实属不易，感谢支持"