sidebar

面向对象的OOCSS，是由Nicole Sullivan提出的css理论，虽说是理论，实则更像一种程序员约定的规范。 是一种把面向对象方法学应用到 CSS 代码组织和管理中的实践。面向对象方法学中的很多理念，如模块化、单一功能原则（Single responsibility principle）和关注点分离（Separation of concerns）等，对于需要组织和管理大量 CSS 代码的应用也是适用的。OOCSS 提出了 CSS 对象的概念，用来表示重复出现的可视化模式。这些模式可以被抽象成独立的 HTML、CSS 和 JavaScript 代码片段，并在整个项目中共享。 有两个重要的原则： 第一个原则是把结构和外观分开。重复出现的可视化模式应该只关注外观，而与 DOM 结构无关。这样可以提高 CSS 对象的可复用性。 第二个原则是把容器和内容分开。这就要求在 CSS 样式中不应该出现与 DOM 树中的位置相关的规则。CSS 样式应该只关注内容，而不是 DOM 元素及其层次关系。 <div class="demo-list"> <ul> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> </ul> </div> 对a修改样式可能用.demo-list

王亚辉 | 发表于 2017-03-29 网易乐得技术团队 在这个系列文章中，我将说明viewports和重要元素的宽度是如何工作的，比如html元素、window和 scrren的宽度。这篇文章是关于桌面浏览器的，目的是为介绍移动浏览器做好准备。大部分的web开发者已经对桌面浏览器的一些概念很熟悉了。在移动浏览器上我们会发现同样的概念，只不过要更复杂一些，回顾一下这些熟悉的概念将对我们理解移动浏览器有很大的帮助。 设备像素和css像素 你需要理解的第一个概念是css像素和设备像素之间的区别。 设备像素，顾名思义，无论你用什么设备，设备像素都是表示设备的实际分辨率。设备像素可以从 screen.width/height 读取。 如果你给一个元素 widht:128px ,你的显示器是1024px宽，你最大化你的浏览器，这个元素可以在屏幕上平铺8个。(大概；忽略一些不确定因素) 如果用户缩放了页面，这个值将发生改变。如果用户放大浏览器到200%，你的128px的元素只能在屏幕上平铺4个了。 用户缩放在浏览器中是通过拉伸像素实现的。也就是说，元素的宽度并没有从128px变成256px，而是像素的尺寸变成了原来的两倍。综上，这个元素仍旧有128px的css像素,但是此时它却占有256px的设备像素。 换句话说，放到到200%使一个css像素尺寸了变成了4倍的设备像素的尺寸。(两倍的宽