百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML5 支持CSS 谷歌字体HTML URL 编码
当前位置：网站首页 > 技术文章 > 正文

不喜欢原子化CSS得我，还是在新项目中使用了Unocss

myzbx 2025-02-15 16:36 12 浏览

前言

本篇文章主要讲述Unocss的使用和个人使用之后的感想

在此之前还写过一篇关于反对在Vue里使用tailwind CSS的一篇文章（主写Vue的，React等框架中没有抵抗）。当然，当时写那篇文章的时候脑子也有是有点迷糊的，后来被怼的的很惨，不敢吭声。

近一段时间，公司里给安排了一个新项目，这次我选择安排上了Unocss+sass来写样式。但为什么本身就比较反对在Vue中使用原子化CSS的我，却在新的项目中使用了Unocss呢？

理由很简单：主要还是原子化CSS最近被炒的非常热，前端技术本来更新的就快，并不是说讨厌某一个技术就要极力去抵抗的(当然也不是说讨厌，只是觉得Vue的css处理已经非常棒了，在Vue中可能不会那么需要一个额外的css框架来支持)，还是有就是当时说tailwind CSS不适合用在Vue中使用的时候，有部分人说我没写过tailwind CSS。哎，我就不写tailwind CSS我写Unocss (。?ω?。)

Unocss的下载使用

下载安装Unocss

npm i unocss
或
yarn add unocss

安装之后为了更好的IDE使用体验，官方是比较建议创建一个单独的文件来配置Unocss

在项目的根目录下创建uno.confin.{js,ts,mjs,mts}文件

//uno.config.ts

import { defineConfig } from "unocss";

export default defineConfig({
  //...Unocss的配置项 看下面配置介绍
});

还需要在vite.config.ts中引入一下

//vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import UnoCss from "unocss/vite";
export default defineConfig(({ command }) => ({
 plugins: [
    vue(),
    //插件中也可以选择指定uno文件地址 参数{configFile: './uno.config.ts'}
    //当然默认不传参数也是可以正常运行的  这里就不选择传入参数了
    UnoCss()
    ],
    //....
  })
  
  
  //另外webpack5中 webpack.config.js
 const UnoCSS = require('@unocss/webpack').default 
 module.exports = { 
     plugins: [UnoCSS()],
     optimization: { realContentHash: true } 
 }

这样在uno.config.ts文件中配置好后，就可以写现在火热的原子化样式了

 

     
iceCode

Unocss配置

Unocss的配置还是挺多的，但是一般情况下很少全部用到，仅有几个配置就可以覆盖大多数的场景

常用配置

rules 规则配置

这个配置主要制定自己样式的规则，这个个人觉得可能会有一部分

rules: [
    //静态规则  生成 .m-1 { margin: 0.25rem; }的样式
    ['m-1', { margin: '0.25rem' }]，
    //动态规则 使用正则表达式进行匹配  可以动态的进行匹配
    //m-3 转化成css .m-3 { margin: 0.75rem; } m-100 转化成css .m-100 { margin: 25rem; }
    [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
    
    
    //如果有需要 还可以更高级 当然大多数情况下用不到

    [
      /^custom-(.+)$/,
      ([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
        // 丢弃不匹配的规则
        if (name.includes('something')) return

        // 如果你想的话，可以禁用这个规则的变体
        if (variantHandlers.length) return
        const selector = e(rawSelector)
        // 返回一个字符串而不是对象
        return `
${selector} {
  font-size: ${theme.fontSize.sm};
}
/* 你可以有多条规则 */
${selector}::after {
  content: 'after';
}
.foo > ${selector} {
  color: red;
}
/* 或媒体查询 */
@media (min-width: ${theme.breakpoints.sm}) {
  ${selector} {
    font-size: ${theme.fontSize.sm};
  }
}
`
      }
    ]  
   ]

presets 预设配置

可以自己设置一些自己的特定场景来指定自己的预设，当然也可以使用Unocss社区提供的预设来进行配置

创建要给自己的预设

// my-preset.ts
import { Preset } from 'unocss'

export default function myPreset(options: MyPresetOptions): Preset {
  return {
    name: 'my-preset',
    rules: [
      // ...
    ],
    variants: [
      // ...
    ]
    // 它支持您在根配置中拥有的大多数配置
  }
}

在使用的的时候引入到 presets 中去即可

// unocss.config.ts
import { defineConfig } from 'unocss'
import myPreset from './my-preset'

export default defineConfig({
  presets: [
    myPreset({
      /* 预设选项 */
    })
  ]
})

主要还是看个人需求，预设这个东西还是用别人制定好的最香。

preset-uno 默认预设

该预设继承preset-wind和preset-mini两个预设

该预设尝试提供流行的功能优先框架（包括 Tailwind CSS、Windi CSS、Bootstrap、Tachyons 等）的共同超集。所以怎么写规则怎么使用可以完全按照这些官网上的写

// uno.config.ts
import { defineConfig,presetUno } from 'unocss'

export default defineConfig({
  presets: [presetUno()]
})

例如，ml-3（Tailwind）、ms-2（Bootstrap）、ma4（Tachyons）和 mt-10px（Windi CSS）都是有效的。


.ma4 {
  margin: 1rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ms-2 {
  margin-inline-start: 0.5rem;
}
.mt-10px {
  margin-top: 10px;
}

preset-attributify 属性化预设

使用属性化预设可以更好的简化模板中css样的代码

// uno.config.ts
import { defineConfig,presetUno,presetAttributify } from 'unocss'

export default defineConfig({
  presets: [
      presetUno(),
      presetAttributify()
    // ...
  ]
})

当使用tailwind CSS写一个工具类的按钮时，过长的样式就会使项目难以维护

可以这时属性化预设就可以很大程度上的简化这些写作的样式

//这样写 是否清晰很多

当然也有一般情况下并不会写这么多样式在模板上


//还可以这样使用


//也可以抛弃class

preset-icons 图标预设

可以使用纯css图标,首先还需要下载icon

npm install -D @iconify/json 也可以只下载 某一个你要使用的图标 npm install -D @iconify-json/[the-collection-you-want]
//或者
yarn add @iconify/json 也可以只下载 某一个你要使用的图标 yarn add @iconify-json/[the-collection-you-want]

// uno.config.ts
import { defineConfig,presetIcons } from 'unocss'

export default defineConfig({
  presets: [
    presetIcons({
      /* options */
    })
    // ...other presets
  ]
})

使用时只需要写class即可

preset-web-fonts 字体预设

可以通过配置的provider属性来使用字体

目前仅支持：

  • none - 仅将字体视为系统字体
  • google - Google Fonts
  • bunny - Privacy-Friendly Google Fonts
  • fontshare - Quality Font Service by ITF
// uno.config.ts
import { defineConfig,presetWebFonts,presetUno } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
    presetWebFonts({
        provider:'none',
      /* options */
    })
  ]
})

preset-wind 预设

UnoCSS 的 TailWind/Windi CSS 预设。继承于preset-mini。

preset-mini 预设

UnoCSS 的基本预设，仅包含最基本的实用工具。

preset-tagify 标签预设

可以将css样式作为HTML的标签使用，当使用单个样式的时候会比较好用。

// uno.config.ts
import { defineConfig，presetTagify } from 'unocss'
export default defineConfig({
  presets: [
    presetTagify({
      /* options */
    })
    // ...other presets
  ]
})

配置标签预设之后，单个样式可以作为标签使用了

red text
flexbox



red text 

flexbox

preset-rem-to-px 转换预设

众所周知，这个css框架使用的都是rem作为单位，如果想要在Unocss中使用px需要写上固定的px单位,这样显得不够简洁，这里就可以使用这个预设自动转将rem转化为px

这个预设不包含在unocss包中，需要单独的额外下载

npm install -D @unocss/preset-rem-to-px
//或
yarn add -D @unocss/preset-rem-to-px

// uno.config.ts
import { defineConfig } from 'unocss'
import presetRemToPx from '@unocss/preset-rem-to-px'

export default defineConfig({
  presets: [
    presetRemToPx({
     baseFontSize: 4, //基准字体大小  官方的默认预设16（1单位 = 0.25rem）所以这里为4 为1：1
    })
    // ...other presets
  ]
})

这里在使用样式的时候，直接写数字就是px为单位的样式



//css
.m-2 {
  margin: 2px;
}

transformers 转换器属性

Transformers 用于转换源代码以支持约定。

它提供了一个统一的接口来转换源代码以支持约定。

// my-transformer.ts
import { createFilter } from '@rollup/pluginutils'
import { SourceCodeTransformer } from 'unocss'

export default function myTransformers(
  options: MyOptions = {}
): SourceCodeTransformer {
  return {
    name: 'my-transformer',
    enforce: 'pre', // 在其他transformer之前执行
    idFilter() {
      // 只转换 .tsx 和 .jsx 文件
      return id.match(/\.[tj]sx$/)
    },
    async transform(code, id, { uno }) {
      // code 是一个 MagicString 实例
      code.appendRight(0, '/* my transformer */')
    }
  }
}

当然，他也有着自己的几个转换器

transformer-variant-group 转换组转换器

为 UnoCSS 启用 Windi CSS 的 变体组特性。

// uno.config.ts
import { defineConfig,transformerVariantGroup } from 'unocss'

export default defineConfig({
  // ...
  transformers: [
    transformerVariantGroup(),
  ],
})

启用这个预设的时候，就可以将一些前缀相同的属性以组的形式来写


//转化为



//个人感觉这种不如上面的 属性化预设  使用属性化预设可以写成 看个人喜好

transformer-variant-group 指令转换器

启用指令转换器将支持 @apply、@screen 和 theme() 指令。

// uno.config.ts
import { defineConfig,transformerDirectives } from 'unocss'

export default defineConfig({
  // ...
  transformers: [
    transformerDirectives(),
  ],
})
  • @apply指令，就是在css使用原子化样式，个人感觉不需要，都在css中写样式另起class名了，为什么不直接写css样式，当然这个也是不被推荐使用的
.custom-div {
  @apply text-center my-0 font-medium;
}
//转化为
.custom-div {
  margin-top: 0rem;
  margin-bottom: 0rem;
  text-align: center;
  font-weight: 500;
}
  • @screen指令，创建媒体查询，通过名称引用断点。这个指令还是有些必要的，比自己写媒体查询要简单一些
.grid {
  --uno: grid grid-cols-2;
}
@screen xs {
  .grid {
    --uno: grid-cols-1;
  }
}
@screen sm {
  .grid {
    --uno: grid-cols-3;
  }
}

//转换为

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 320px) {
  .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
  • theme() 主题指令，可以直接访问到主题配置值。
.btn-blue {
  background-color: theme('colors.blue.500');
}
//转化为
.btn-blue {
  background-color: #3b82f6;
}

transformer-compile-class 编译类转换器

这个转换器可以将写在一个元素上的样式编译成一个类名

// uno.config.ts
import { defineConfig,transformerCompileClass } from 'unocss'

export default defineConfig({
  // ...
  transformers: [
    transformerCompileClass(),
  ],
})

在类字符串的开头加上:uno:即可将后面所写的样式编译成一个类名，不支持属性化预设


  






  




//css
.uno-qlmcrp {
  text-align: center;
}
.uno-0qw2gr {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}
.uno-0qw2gr:hover {
  --un-text-opacity: 1;
  color: rgba(248, 113, 113, var(--un-text-opacity));
}
@media (min-width: 640px) {
  .uno-qlmcrp {
    text-align: left;
  }
}

transformer-attributify-jsx JSX转换器

这个转换器主要作用于 在jsx文件内写 属性化预设的样式

// uno.config.ts
import { defineConfig, presetAttributify,transformerAttributifyJsx } from 'unocss'

export default defineConfig({
  // ...
  presets: [
    // ...
    presetAttributify()//属性化预设
  ],
  transformers: [
    transformerAttributifyJsx(), // <--
  ],
})

如果没有这个转换器，在jsx中使用属性化预设将会将无值的样式识别成布尔值

export function Component() {
	return (

		unocss
          
)
}
//这里将会转换为
export function Component() {
  return (
    

      unocss
    

  )
}

非常用配置

个人感觉剩下的配置一般情况下都不太能使用的到，也看项目环境吧。

shortcuts 快捷方式

可以在属性内配置一些原子化样式的快捷方式，并且可以类似于Rules一样配置动态快捷方式。

shortcuts: {
  // 使用原子化样式定义快捷类
  'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
  'btn-green': 'text-white bg-green-500 hover:bg-green-700',
  //使用动态创建快捷方式
  [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`]
}

theme 主题属性

UnoCSS 也支持像 Tailwind / Windi 中的主题系统。在用户级别上，您可以在配置中指定 theme 属性，它将与默认主题进行深度合并。

theme: {
  // ...
  colors: {
    'veryCool': '#0000ff', // class="text-very-cool"
    'brand': {
      'primary': 'hsla(var(--hue, 217), 78%, 51%)', //class="bg-brand-primary"
    }
  },
}

//在rules中使用
rules: [
  [
    /^text-(.*)$/,
    ([, c], { theme }) => {
      if (theme.colors[c]) return { color: theme.colors[c] }
    }
  ]
]

variants 变体属性

允许对现有规则应用一些变化，例如hover:变体

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // 去掉前缀并将其传递给下一个变体和规则
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  }
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]
  • matcher 控制变体何时启用。如果返回值是字符串，则将其用作匹配规则的选择器。
  • selector 提供了自定义生成的 CSS 选择器的可用性。

内部实现

  • 用户使用中提取了 hover:m-2
  • hover:m-2 发送给所有变体进行匹配
  • hover:m-2 被我们的变体匹配并返回 m-2
  • 结果 m-2 将用于下一轮变体匹配
  • 如果没有其他变体匹配，m-2 将继续匹配规则
  • 第一条规则匹配并生成 .m-2 { margin: 0.5rem; }
  • 最后，我们将我们的变体转换应用于生成的 CSS。在这种情况下，我们将 :hover 前缀添加到 selector 钩子中。

extractors 提取器属性

提取器用于从源代码中提取工具的使用情况。

默认情况下，会使用 extractorSplit 进行拆分。该提取器会将源代码拆分为标记，然后直接提供给引擎。

preflights 预检查器属性

从配置中注入原始 css 作为预处理。解析的 theme 可用于自定义 css。

preflights: [
  {
    getCSS: ({ theme }) => `
      * {
        color: ${theme.colors.gray?.[700] ?? '#333'};
        padding: 0;
        margin: 0;
      }
    `
  }
]

layer 图层属性

主要用于css的顺序的优先级问题，css的顺序影响他们的优先级，这了可以在自定义样式时，添加图层来固定css顺序

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],//添加图层
  // 当您省略图层时，它将是 `default`
  ['btn', { padding: '4px' }]
]
//也可以在与检查中调用预设样式，进行图层设置
preflights: [
  {
    layer: 'my-layer',
    getCSS: async () => (await fetch('my-style.css')).text()
  }
]

图层自定义

ts

autocomplete 自动完成属性

在智能建议在演示平台和VS Code 扩展中可以进行定制。针对于智能提示的属性

autocomplete: {
  templates: [
    // 主题推断
    'bg-$color/',
    // 简写
    'text-',
    // 逻辑或组合
    '(b|border)-(solid|dashed|dotted|double|hidden|none)',
    // 常量
    'w-half',
  ],
  shorthands: {
    // 等同于 `opacity: "(0|10|20|30|40|50|60|70|90|100)"`
    'opacity': Array.from({ length: 11 }, (_, i) => i * 10),
    'font-size': '(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)',
    // 覆盖内置的简写
    'num': '(0|1|2|3|4|5|6|7|8|9)'
  },
  extractors: [
      // ...extractors
  ]
}

整体配置如下

import { 
defineConfig,
presetUno, 
presetAttributify, 
presetTypography, 
presetIcons,
transformerVariantGroup， 
transformerAttributifyJsx,
transformerCompileClass,
transformerDirectives,
} from "unocss";
import presetRemToPx from "@unocss/preset-rem-to-px";
export default defineConfig({
  //自定义规则
  rules: [[/^bg-?([0123456789abcdef]+)$/i, ([_, rgb]) => ({ background: `#${rgb}` })]],
  //预设规则 有前两个预设可以满足95%以上的需求
  presets: [
    //此预设规则可以看Tailwind CSS、Windi CSS、Bootstrap、Tachyons官网了解相关规则
    presetUno(), //m-10 理解为 margin:10rem 或者 m-10px 理解为 margin:10px
    presetAttributify(), //归因模式 bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600" 背景颜色的简写  也可以再元素上不加class 直接写属样式 例如 

   // presetTypography(), //排版预设 详细排版看https://unocss.dev/presets/typography#colors 使用这个前两个必须
   // presetIcons(), //css图标 支持图标看 https://icones.js.org/ 需要下载

   // 这里看个人需求是否要使用px
    presetRemToPx({
      baseFontSize: 4, //基准字体大小  官方的默认预设（1单位 = 0.25rem） html的字体是16  所以这里为4
    }), //默认unocss默认是rem 转换成 px单位
  ],
  //看个人需求添加转换器
  transformers: [
   transformerVariantGroup()，
   transformerAttributifyJsx(), 
   transformerCompileClass(), 
   transformerDirectives()
  ],
  //以下可以按个人需求添加
  shortcuts：{}，
  layers: {},
  theme: {},
  variants: [],
  extractors: [],
  preflights:[]
});

错误和插件

问题主要针对 属性化预设的问题，由于 属性化预设的简洁、书写方便，大多数场景下可使用属性化来写样式，但是属性化存在着一些问题

以上这些写法都是会报错的，属性中不允许包含%\[]\#等一些特殊符号的，所以包含颜色或者自定义等含有特殊符号无使用属性化来写样式

属性化支持有值多属性写法，可以使用这种形式来写属性化样式，当然中写的还不如直接一个class的好

不过当一些有着多属性时，这种写法较为舒服

另外class和属性化的负数值写法是不同




        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo veniam aut esse iure mollitia. Earum omnis aliquid minus porro nulla commodi dignissimos, voluptatem
        accusamus cumque reprehenderit, ea nisi perferendis quis.
      

 
 
 

        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo veniam aut esse iure mollitia. Earum omnis aliquid minus porro nulla commodi dignissimos, voluptatem
        accusamus cumque reprehenderit, ea nisi perferendis quis.

创建单独的uno.config.ts文件就是为了在IDE中配合插件使用，在一个页面中如果这样写可能会看着很乱，当配合插件之后，会比较清晰明了一些

在应用商店直接搜Unocss

安装完成之后，你页面中所写的样式都会给标明出来

另外在安装最新的插件之后，有可能会产生没有样式标识和样式提示的问题，这里需要在settings.json（这里是针对vscode的问题） 文件中添加一个属性

//settings.json
{
//其他配置
//...

//假如你的项目在D:/git-item/my-item/你所保存的所有项目，那么这里的属性值就可以是D:/git-item/my-item（或者加上你的详细项目）
"unocss.root": "你当前项目的绝对路径",
}

个人感受

  1. Unocss对比tailwind CSS某些方面写法上更快，再熟悉之后开发速度还会再有提升。
  2. 整体配置还算简单，差不多就是即插即用的感觉。
  3. 有一定的学习曲线，如果在不考虑同事或以后维护人员的死活（希望我的同事不玩掘金），可以潇洒的使用。主要还是因为不一定是所有人都要学会使用这个css框架，当你在模板中使用这些语法，同事还没安装插件的同时，他们很难看懂这是什么意思
  4. 语法过于灵活，因为各种预设和转换器的存在，可以使用很多种语法来写样式，导致没有tailwind CSS“死板”，语法无法统一。例如：m2、m-2、m='2'完全是一样，又比如：font500、font-500、fw-500等也是完全相同的。如果在不是很熟悉的情况下，会导致很混乱的感觉。
  5. 个人觉在Vue里，模板中超过5个样式就不应该写在模板中了，本来Vue为了让模板简洁就下了很大的功夫，例如在Vue3.4中，Vue允许相同的变量名和属性名相同时，可以进行简写了，例如就全等于 。然而为了写样式，又再次让模板臃肿起来，个人觉得这个是不符合Vue的设计理念的。
  6. 模板中需要使用两三个简单的样式使用原子化写真的很方便，这个是毋庸置疑的，无需再额外添构思应该怎么起class名。
  7. 样式权重问题，现在写项目基本都是组件库，很多时候需要在组件库的组件上添加我们需要的样式，有些情况下想要使用原子化样式来改变样式是无法改变的，因为权重不够，必须在组件上添加style属性来进行更改
  8. 有些使用原子化不仅是为了使用方便，还有tailwind CSS 官方所说的，他们在打包之后会很小。但是，在项目开发时，自己写css样式的大小真的可以忽略不计。我现在开发的项目打包之后6.37MB,css占用222KB,其中Unocss打包大小11.3KB剩下的都是组件库的样式。所以不要觉得自己写点css样式就可以影响整个包的大小。
  9. 我也是这么认为的，原子化样式不是终点，本身也许只是个过渡。

最后

原子化样式目前来说是一种CSS的发展趋势，可以使用。也可以选择不用，毕竟现在的CSS已经发展很成熟了，包括Sass、Less等一些预编译器也发展的很成熟，他们都有自己变量函数等一些操作，如果想要写一个主题，使用变量来实现是一个很好选择。

当然，最后个人觉得原子化样式在Vue、Servlet等这种对CSS的处理很好的框架中不是很好的选择。如果是React等这种对CSS处理没有那么好的框架中，除了CSS-in-JS还是很不错的选择


原文链接：
https://juejin.cn/post/7322401091237068854

相关推荐

攀升战境S5电竞主机评测:NVIDIA RTX 3060实力助阵，光追游戏走起

此次笔者将为玩家们推荐一款游戏主机——攀升战境S5。该主机是攀升电脑今年力推的游戏装备，主机采用一线品牌配件，特别是在显卡选用上严苛把关，精选GeForceRTX30系列显卡，玩家们大可以放心选购...

慎买-神牛闪光灯兼容性问题:神牛V350&amp;松下S5M2

神牛V350和松下S5M2的兼容性问题。大家好，我是向往闪光灯人像的Fish。国庆期间，我购买了神牛V350闪光灯和神牛X2T引闪器，但这成为了我的噩梦。我原以为客服和松友们说这款闪光灯在松下S5M2...

Acer蜂鸟持续办公一整天（acer 蜂鸟s5）

移动办公在工作节奏日益加快的今天越来越普遍，目前大部分工作无法在手持设备上完成，笔记本依然是移动办公最明智的选择。为了实现移动办公，很多笔记本越做越轻薄，性能也越来越强，而续航却一直没有很大提升。笔者...

职业车手明年会骑什么?2021赛季各大世巡赛车队使用器材一览

新年的钟声即将敲响，意味着充满魔幻色彩的2020年即将过去。受新冠肺炎的影响，2020年的赛季非常不同寻常。因这一原因不得不延迟举行的各种比赛导致许多车队的赞助商无法得到足够曝光，这也间接导致了许多车...

三星部分手机系统升级路线图流出（三星系统在哪升级）

三星包括Note3和S5在内的手机在升级到4.4.2系统之后一直没有什么系统升级的消息，而最近流出的一张三星的系统升级路线图中出现了一共13台手机升级KTU84P（也就是Android4.4.4）...

索尼Xperia Z3配置大曝光:升级并不大

IT之家（www.ithome.com）：索尼XperiaZ3配置大曝光：升级并不大索尼明天就会在IFA2014大会上发布其下代旗舰XperiaZ3智能手机，目前网上曝光了其原型机，并且机身背后...

不进反退 三星Exynos 5433只能运行32位模式?

三星GalaxyNote4将带有两个版本，除了国行使用的骁龙805以外，还有三星自家的Exynos5433版本。而这颗SoC的详细信息三星并没有公布，据外媒Anandtech称，他们从源码中确认...

尼康Z6III测评:对比EOS R6 II、A7M4、S5IIX

摄影器材测评网站DPReview刚刚发布了尼康Z6III的完整图文测评，该机获得金奖评级，得分达到91%。以下是该文章的摘录——尼康Z6III核心规格：2400万像素“部分堆栈式”传感器RAW连拍：机...

赛默飞Ion S5首批数据公布，玩爆前任PGMTM系列

北美时间9月1日，赛默飞发布了两款最新的NGS系统IonS5和IonS5XL，旨在提供更加简捷的靶向测序流程。10月29日IonS5测序仪的首批实验数据产生于阜外医院。阜外医院研究人员选用了主...

Excel技巧:快速制作批量文件夹，省时省力，加强工作效率

大家好，如果公司领导要求按人员姓名制作文件夹，以一人一档的形式呈现人员档案，办公人员一个一个制作费时费力，而且效力低下，今天为大家介绍快捷制作批量文件夹的方法下面我们用图片来进行演示操作打开表格，选...

国行、港版、美版Apple watch各版本售价一览

今天凌晨，苹果牌手表正式发布，苹果开始正式进入可穿戴设备领域，除了功能和外观，我相信大家更关心的是价格问题了，小编就将国行、港版、美版的Applewatch售价做一总结，以供参考。国行：美版：港版：...

松下全画幅微单S5和S1到底哪里不一样?

Hello，我是ET，欢迎大家来到我的“相机笔记”。————9月2日晚，松下正式发布了第4款全画幅微单LUMIXS5。这一篇，我们主要来说松下LUMIXS5和LUMIXS1到底有哪些区别...

融会贯通之典范 神舟S7-2021S5评测

便携、性能、续航，这简简单单的六个字道出了这么些年来笔记本电脑的设计方向，可是由于底层技术、模具设计等等原因，这三点并不能很好的融合在一起。虽说闻道有先后，术业有专攻，但能够有一台融会贯通的产品，不是...

三国志战略版:S5赛季装X指南，开荒不是一成不变，需要因地制宜

大家好我是零氪玩家花席，S5赛季已经开始，因为S5赛季的野地阵容和S4赛季没有区别，所以S5赛季开荒相对不难。你在S4有经验，并且多了很多武将和战法，还能用150赛季功勋兑换7500战法点。S5赛季新...

聊聊松下S5M2和S5M2X的区别（松下s5k和s5c有什么区别）

先简单说下哪里不同：12bitRAWHDMI外录支持直接将视频录制到USB-SSD上多了All-Intra和ProRes编码支持有线/无线IP推流，USB网络连接黑化的机身不过要特别强调一下，S5...

一周热门
最近发表
标签列表