概念: device-pixel-ratio:定义输入设备屏幕的可视宽度与可见高度比率. device-width:输入设备屏幕的可视宽度. orientation :屏幕横竖屏定向.landscape 是横向,portrait 是纵向[ipad 相反] /* iPhone 4 ———– */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio…

今天看到一些关于web设计的一些建议和设计经验,拿出来分享分享. 第一篇: 提升移动设备响应式设计的8个建议 一.直观性和易用性 在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体验一般用户是没什么耐心的,这对于双方来说都不是好事.设计师和开发人员一定要牢记,在移动web环境中,动力是一个很关键的因素,漫长的响应时间加上杂乱的界面再加上不给力的移动设备(虽然最新的移动设备一般都很给力,但是如果在同时运行着10个游戏外加开着聊天软件另外网速也不好的情况下呢)就无法保证达到“一般…

现在做前端响应式网站特别,响应式成为现在前端设计一个热点,它成为热点的最主要的原因就是,移动端设备屏幕的种类多样,那么如何设置响应式屏幕. /*打印样式*/ @mediaprint{color:red;} /*手机等小屏幕手持设备*/ @mediascreenand(min-width:320px)and(max-width:480px){body{background:yellow;}} /*平板之类的宽度1024以下设备*/ @mediaonlyscreenand(min-width:321…

CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/softlover/archive/2012/11/21/2781388.html 现在屏幕分辨率的范围很大,从 320px (iPhone) 到 2560px (大型显示器),甚至更大.用户也不只是使用台式电脑访问web站点了,他使用手机.笔记本电脑.平板电脑.所以传统的设置网站宽度为固定值,已经不能…

Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool’s Gold>对媒体查询(media query)吐槽,大意是在移动设备上使用媒体查询会造成很多资源的浪费——浏览器请求到很多用不到的图片等资源,然后写了一些测试用例测试一些可用方法.然后Tim Kadlec写了篇<Media Query & Asset Downloading Results>,用js自动化的测试了Jason Grigsby的用例. 本文主要整理…

使用Effective pixels有效像素设计UI 什么是缩放像素和Effective有效像素: 当你的应用程序运行在Windows的设备,系统用一个算法控制的规范,字体,和其他UI元素显示在屏幕上. 英尺的距离是一样的清晰的用户为15像素字体在5的电话是几英寸远. 因为如何缩放系统工作,你设计你的Windows通用的应用程序时,你在有效像素的设计,而不是实际的物理像素.有效像素可以变成多种物理像素. 有效像素,使您可以专注于实际感知的大小一个UI元素而无需担心像素密度或不同设备的观看距离.…

你的网页在手机上显示效果可以在电脑上一样好看.完成这个任务的奥秘被称为响应式设计,媒体查询(media query)是实现网页响应的关键. 在电脑上一个例子: <div class="row"> <div class="span4">...</div> <div class="span4">...</div> <div class="span4">...&…

概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的概念:屏幕分辨率和设备像素的区别在于设备像素显示密度. 当设备屏幕ZOOM=100%的时候,浏览器CSS像素尺寸和设备像素相等,而当像素密度(pixel density)为1的时候,屏幕分辨率和设备像素相等. 响应式设计 在响应式设计中,使用了viewport,device-width,media…

书里谈到尽量不要使用Media Queriy. 但是过多使用media query,会导致CSS变得脆弱和页面难以维护.一些方法可以减少页面使用 media query. 响应式设计: (1) 使用百分比替换固定的宽度.如果不行,也尽量使用vw, vh, vmin, vmax. (2) 使用max-width,而不使用width. (3) 对于一些元素,如img, object, video, iframe, 使用max-width: 100%. (4) 如果背景图片要完全覆盖容器,可以使用ba…

paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 设计思路Mobile First 2 #---手机and平板分辨率 3 #---------viewport...允许网页宽度自动调整贝儿哪不个网页缩小兰.. 3 #----------处理图片缩放的方法 3 #----选择加载CSS  Media Queries 3 #=====3.布局宽度使用…