`
天梯梦
  • 浏览: 13733273 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论
文章列表
英文:http://www.quirksmode.org/mobile/viewports2.html 翻译:http://weizhifeng.net/viewports2.html   在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕。   这篇文章 ...
1. Phones and Handhelds a) iPhones /* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ @media only screen and ...
翻译自stackoverflow.com,源地址:http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web   有同学需要开发web页在iphone/android手机上访问,想问max-device-width 与 max-width 有什么区别,他打算针对不同的屏幕大小加载不同的样式,就像下面这样: @media all and (max-device-width: 400px) @media al ...
定义和使用 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页 ...
  观看视频:  CSS: SASS用法指南     学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。 很自然地,有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preprocessor)。它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。   各种"CSS预处理器"之中,我自己最喜欢 ...
MongoDB 教程索引   MongoDB 教程一: 安装和使用 (Mongodb启动命令mongod参数说明) MongoDB 教程二: 添加, 删除,查询 shell命令 MongoDB 教程三: 高级查询 MongoDB 教程三: 高级查询 (SQL到MongoDB映射表) MongoDB 教程四: 高级更改操作 MongoDB 教程番外篇之管理工具: Rockmongo
原文出处: fastcodesign   译文出处:码农网 – 小峰   Froont,一家为web设计师制作工具的旧金山公司,用9个GIF格式动画来表现网页设计在过去25年的发展历程。如果你想知道为什么CSS这么重要,为什么Flash会逐渐淘汰,这些动 ...
原文出处: Medium   译文出处:朵璞     1. 手势取代点击 我们都已经忘记滚动条曾经是有多麻烦,大多数用户都得煞费苦心地把鼠标移至屏幕右侧来移动这古老的滚动条: 作为一名专业人士,想必你一定用过鼠标滚轮 ...
原文出处: 迅雷CUED     登录?   两个输入框加一个按钮?还能怎么做?   那就先来看看为什么而做? 就数据而言,网站的流量仍是大量的匿名用户带来的。我们无法根据请求的任何方面(ip地址,用户代理等)准确识 ...
随着3G的普及,越来越多的人使用手机上网。   移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?   手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。   很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本, ...
查看视频地址: 什么是Viewport Meta(width详解)及在手机上的应用     viewport 是专为手机浏览器设计的一个meta标签; 有些屏幕很小有智能手机,但分辩率却可以做得很大,比如小米4的默认分辨率 为:1920*1080,比许多电脑桌面的都还大,传统桌面网站直接放到手机上阅读时,界面就会显得非常小,阅读体验就很差,就样就需要一种将原始视图在 手机上放大的机制,使用viewport标签可以解决这个问题,如 <meta name="viewport" content="width=device-width, initial-s ...
开 始第一篇。老规矩,先无聊的谈论天气一类的话题。十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡。话说两年前也是在国庆假期里开始 做Joomla文档翻译的;长假好时光,总会可以抽出一两天 ...
你可能已经被关于应该用Sass还是用LESS的争论折磨死了。在这篇文章中,我会解释为什么你应该使用Sass。如果你感兴趣,我会介绍如何开始使用Sass以及在预处理时会遇到的一些问题。   在我的长篇大论之前,让我稍微提一下 ...
十一长假已然过去了一大半。今天倒真是晴朗的不行,向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子。自从不再是学生,对每年的几次 长假就无比珍惜,想方设法让每一天都尽量过的饱满一些;夜里闭上眼,满脑子就都是Drupal、博客、咖啡、使命召唤、南方公园...也许需要出门走一走 了。   OK开始说正经的了。在之前一篇译文中,我们了解了响应式Web设计的概念、组成要素以及基本的实现思路。今天继续相关话题,我们将从前文介绍过的“弹性布局结构”这方面出发,通过一个具体的实例来深入学习。 如 今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极 ...
for parent block or body  - text-align:center;  for centerd block- display:inline-block; <style> body{text-align:center} .center{display:inline-block;background:red} </style> <div class="center"> <p contenteditable="true">write text</p> ...
Global site tag (gtag.js) - Google Analytics