如何知道手机屏幕的CSS像素宽度？

如何知道手机屏幕的CSS像素宽度？

   08:45       寡人的吐槽胜地

---

随着移动设备浏览量的迅速增长，自适应网页设计变得越来越重要。Web程序员在开发移动端页面时时常会遇到这样的问题，手机设备商声明的屏幕像素宽度尺寸和网页开发时使用的CSS像素宽度不一致，为什么会出现这种情况呢？

此像素非彼像素

设备像素(device pixel):

设备像素设是物理概念，指的是设备中使用的物理像素。
比如iPhone 5的分辨率640 x 1136px。

CSS像素(css pixel):

CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。
在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，设备像素(device pixel)是绝对单位。

比如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而CSS逻辑像素数为320 x 568px。

设备像素与CSS像素之间的换算是如何产生的呢？

这就需要要谈到每英寸像素(pixel per inch)和设备像素比(device pixel ratio)。

每英寸像素(pixel per inch)：

ppi，表示每英寸所拥有的像素(pixel)数目，数值越高，代表显示屏能够以越高的密度显示图像。ppi的计算方式可以参考维基百科每英寸像素

设备像素比(device pixel ratio)：

以上计算出ppi是为了得到密度分界，获得默认缩放比例，即设备像素比。

由上图可知，ppi在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度（Apple给了它一个高大上的名字——Retina）。

获得设备像素比后，便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。

美工和WEB前端开发人员之间如何协同：

一般美工按照设备像素(device pixel)为单位制作设计稿。前端工程序员，参照相关的设备像素比(device pixel ratio)，进行换算以及编码。

Read More

如何知道手机屏幕的CSS像素宽度？

如何知道手机屏幕的CSS像素宽度？

   07:33       寡人的吐槽胜地

---

随着移动设备浏览量的迅速增长，自适应网页设计变得越来越重要。Web程序员在开发移动端页面时时常会遇到这样的问题，手机设备商声明的屏幕像素宽度尺寸和网页开发时使用的CSS像素宽度不一致，为什么会出现这种情况呢？

此像素非彼像素

设备像素(device pixel):

设备像素设是物理概念，指的是设备中使用的物理像素。
比如iPhone 5的分辨率640 x 1136px。

CSS像素(css pixel):

CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。
在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，设备像素(device pixel)是绝对单位。

比如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而CSS逻辑像素数为320 x 568px。

设备像素与CSS像素之间的换算是如何产生的呢？

这就需要要谈到每英寸像素(pixel per inch)和设备像素比(device pixel ratio)。

每英寸像素(pixel per inch)：

ppi，表示每英寸所拥有的像素(pixel)数目，数值越高，代表显示屏能够以越高的密度显示图像。ppi的计算方式可以参考维基百科每英寸像素

设备像素比(device pixel ratio)：

以上计算出ppi是为了得到密度分界，获得默认缩放比例，即设备像素比。

由上图可知，ppi在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度（Apple给了它一个高大上的名字——Retina）。

获得设备像素比后，便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。

美工和WEB前端开发人员之间如何协同：

一般美工按照设备像素(device pixel)为单位制作设计稿。前端工程序员，参照相关的设备像素比(device pixel ratio)，进行换算以及编码。

Read More

15款很实用的 SASS 和 Compass 工具

15款很实用的 SASS 和 Compass 工具

   08:10       寡人的吐槽胜地

---

SASS 是 CSS 的扩展，增加了嵌套规则，变量，混入功能等很多更多。它简化了组织和维护 CSS 代码的成本。Compass 是一个开源的 CSS 框架，使得使用 CSS3 和流行的设计模式比以往任何时候都更容易。

在这篇文章中，我们已经收集了一组有用的 Sass 和 Compass 工具，将帮助您快速构建 Web 应用程序。

1. Compass.app

Compass is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain. With compass, you write your stylesheets in Sass instead of plain CSS. Compass.app is a menubar only app for Sass and Compass. It helps designers compile stylesheets easily without resorting to command line interface. Compass.app is written in Java (JRuby), and works in mac, linux and pc. You do not need to install Ruby environment to use it.

2. Scout

Scout is a cross-platform app that runs Sass and Compass in a self-contained Ruby environment, Scout runs Sass and Compass in a self-contained Ruby environment, letting you effortlessly manage all of your Sass projects with a handful of clicks. You’ll never have to worry about your Ruby setup or deal with technical issues. Scout does all of the heavy lifting, giving you more time to do what you love.

3. Codekit

Codekit is a powerful compiler that processes Sass, Compass, Less, Stylus, Jade, Haml, Slim, CoffeeScript and Javascript files automatically each time you save. With live browser reloads, image optimization and easy debugging, it makes working with Compass and Sass a breeze. The app also offers team collaboration and helps reduce load times by combining and minifying files.

4. Archetype

Archteype is a Compass/Sass framework for creating configurable, composable UI patterns and components. It’s well documented and uses a natural language syntax.

5. Susy

Susy provides responsive grids for Compass, filling the void left when grids were stripped from Compass. You can quickly add media-query breakpoints for new layouts, or create your own math using Susy’s array of grid helpers. It has the power to help you build a site in minutes, or create a scalable grid library for use in large projects.

6. The Saasway

The Sass Way covers the latest news and topics on crafting CSS using Sass and Compass, with articles, resources and tutorials to suit both beginners and advanced users.

7. Sassaparilla

Sassaparilla makes starting responsive web projects faster using Sass and Compass. It focuses heavily on better typography with exceptional vertical rhythm, and lets you work in px while compiling in ems, eliminating a lot of math designers often need to do. It supports variables using Sass for things like color.

8. LivingStyleGuide

The LivingStyleGuide Gem is an easy way to create front-end style guides using Sass and Compass. Just add Markdown to your Sass to create your guides.

9. Pondasee

Pondasee has been made to help front-end designers accelerate their work-flow for making web applications. It is NOT a CSS framework, it is a front-end starter kit combined with the power of SCSS & Compass to help build a template.

10. LiveReload

LiveReload resides in your menu bar and monitors changes in the file system. As soon as you save a file, it is preprocessed as required, and the browser is refreshed. It ships with SASS, Compass, LESS, Stylus, CoffeeScript, IcedCoffeeScript, Eco, SLIM, HAML and Jade, and is controlled by two main checkboxes, so you won’t get lost.

11. Koala

Koala is a GUI app for CoffeeScript, Compass, Less, and Sass compilation, to make you a more efficient web developer. It runs on Mac, Linux, and Windows, and includes real-time compilation, multi-language support, and more.

12. Bootstrap Sass

Bootstrap-Sass is a Sass-based version of Bootstrap, perfect for your Sass-powered applications. It can be installed with Rails, Compass, or Sass-only.

13. Forge

Forge is a free command-line toolkit for bootstrapping and developing WordPressthemes in a tidy environment using front-end languages like Sass, LESS, and CoffeeScript. Forge creates a neatly organized source folder with clean and simple scaffolding (base template files, SCSS files, and theme options). The source folder is automatically compiled to your local WordPress install(s) as you save changes and work on your theme.

14. Prepros

Prepros is an app dedicated to making compiling code easier. It compiles all of your Sass, Scss, Compass, Less, Jade, Haml and CoffeeScript in real time, with live browser refresh to keep your preprocessing workflow seamless. It has no dependencies and features a built-in HTTP server, background file watch, error notification and live CSS injection.

15. Break Point

Breakpoint makes writing media queries in Sass super simple — just create a variable using a simplified syntax, based on most commonly used media queries, then call it using the “breakpoint” mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself to handling cross-browser compatibility issues.

Read More

15个优秀的 CSS 解决方案和工具

15个优秀的 CSS 解决方案和工具

   08:55       寡人的吐槽胜地

---

CSS 代码是很难管理，尤其是在大型项目。 样式都写在一个全局作用域里，通过复杂的选择器来指向特定的页面元素。冗余、膨胀和维护可以成为前端开发人员的一场噩梦。幸运的是我们有一些 CSS 工具来帮助开发者克服这种情况。这里集合了15款个优秀的 CSS 解决方案和工具，分享给大家。

1. Ballon.css

Balloon.css lets you create simple tooltips with pure CSS. It requires only a few lines of CSS to work, and no JavaScript. Also keep in mind that if pseudo elements are already in use on an element, the tooltip will conflict with them resulting in potential bugs.

2. Hugo

Hugo is a static HTML and CSS website generator written in Go. It is optimized for speed, easy use and configurability. Hugo takes a directory with content and templates and renders them into a full HTML website. Hugo relies on Markdown files with front matter for meta data. And you can run Hugo from any directory. This works well for shared hosts and other systems where you don’t have a privileged account.

3. Atomizer Web

Atomizer is a tool for creating Atomic CSS. Generate an Atomic stylesheet dynamically from the Atomic classes you’re actually using in your project (no unused styles!), or predeclare styles in configuration – it’s up to you. Atomizer is not opinionated, brings no CSS of its own, and integrates nicely with your favourite task runner.

4. Repaintless

Repaintless.css in a lightweight animation library that consists only of animations that don’t cause reflows and repaints of a website when used correctly. The idea for a library came after seeing the talk by Paul Lewis on animations and FLIP technique. Basic idea is to remove transition from element, not to apply it while animating. It saves user a tiny lag before animation starts and feels super smooth. To understand the concept better you can read a blog post on that or at least this quote from the post:

5. Bemify

Bemify is a set of Sass mixins for writing maintainable, idiomatic, well-structured BEM-style .scss source code. It can be installed as a Ruby Gem, NPM module, or via Bower.

6. Stellar

Stellar is a LESS library that helps you scaffold your web apps. It’s simple to use and supported on most modern browsers.

7. StringBean

The featherweight responsive CSS Framework based on a 24-point system, rather than the traditional 12-point system that other frameworks use. Sometimes, 12 is just too few, especially on a high resolution screen, such as 4K – at 4K String Bean comes into its own! This gives the developer the power to divide the screen up in more finite segments providing you with greater control over the widths of content on your site, especially at higher resolutions (think HD & UHD (2K, 3K, 4K, and above).

8. Min

Min is a super tiny CSS framework, coming in at only 995 bytes. It has exceptional browser support and semantic markup. Min is extremely lightweight and doesn’t prescribe a certain design for you, like Bootstrap. It’s easy to override the default rules since there are so few of them and they are at low specificity levels. This customizability helps you avoid the Yet Another Bootstrap Site phenomenon.

9. Voxel.css

Voxel.css makes it easy to render 3D. It supports all image types and includes GPU acceleration and CSS3 transitions.

10. Timelined

Timelined is a CSS-only vertical timeline that’s fully customizable. You can use it to create static or dynamic timelines.

11. Colorfilter

Colofilter.css lets you easily add duotone filters to photos using CSS. It’s a cool effect, but doesn’t work in every browser, so make sure you don’t use it on anything mission-critical.

12. UnMQ

UnMQ removes media queries from your CSS while preserving rules that match a hard-coded viewport. It’s useful for outputting CSS for older desktop browsers, like IE8.

13. Utlity Open Type

Utility OpenType offers simple, CSS utility classes for creating advanced typographic features. It includes common and discretionary ligatures, small caps, case sensitive forms, and much more.

14. Flexbox.help

Flexbox.help lets you test CSS flexbox rules live. It’s a great sandbox for figuring out how best to use flexbox.

15. CSSketch

CSSketch adds CSS support to Sketch 3 to speed up your workflow. Just attach a stylesheet to your designs to quickly change colors and shadows, lay out your design, and more.

Read More