响应式web设计最佳实践

响应式设计分2种:

响应式一:小尺寸,大尺寸设备展示的内容,结构没多大差别,布局差异不大(仅仅只是横竖摆放及个数问题而已)。

响应式二:小尺寸设备和大尺寸设备展示的内容结构差别很大,布局差异大,html结构变化大,比如tmall。

针对以上2种情况,使用不同的响应式设计

响应式一解决方案:

1,共用统一套html

2,使用media query加载不同的css样式:small.css, large.css。其中small.css和large.css又分别是响应式

3,图片资源动态加载节省流量:使用data-src-small和data-src-large

响应式二解决方案:

移动端一套,pc端一套。分别在自己的领域自适应。

时间: 2024-08-27 00:33:40

响应式web设计最佳实践的相关文章

响应式网站设计 - 最佳实践

一.移动优先 手机设计稿通常更为简约,由手机设计稿开始制作简单版本,随着平板和桌面的引入,页面慢慢复杂,这是一个递增的过程,前期把精力放到核心模块上,默认打开简洁的手机样式,而负责的样式包裹在media query中,所以不会加载,这样访问速度是最佳的 .content { /*basic effects designed for mobile devices*/ } @media screen and (min-width: 400px) { /*complicate effects for

《响应式Web设计实践》学习笔记

原书: 响应式Web设计实践 第2章 流动布局 1. 布局选项 传统的固定布局中存在很多问题, 随着屏幕大小的越来越多元化, 固定布局已经不能适用了. 在流动布局中, 度量的单位不再是像素, 而是变成了百分比. 弹性布局与流动布局类似, 但是通常情况下, 弹性布局中会以em来作为单位. 带来一个好处是随着用户增大或减小字体, 适用弹性布局的元素的宽度也会等比例地变化. 但是其也可能出现水平滚动条 混合布局 媒体查询: 媒体查询允许根据设备的信息----诸如屏幕宽度, 方向或者分辨率等属性来使用不

响应式web设计与CSS3媒体查询

在之前一篇译文中,我们了解了响应式Web设计的概念.组成要素以及基本的实现思路.今天继续相关话题,我们将从前文介绍过的"弹性布局结构"这方面出发,通过一个具体的实例来深入学习. 如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面.这种情况下,固定宽度的设计方案将会显得越发不合理.页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行

响应式Web设计--学习总结

这些天看了Tim Kadlec著.侯鸿儒译的<响应式Web设计实践>一书后深有体会.于是总结出以下学习响应式Web设计的要点与大家分享: 待续...

十大响应式Web设计框架

http://www.csdn.net/article/2014-05-13/2819739-responsive-frameworks-for-web-design 对于设计师而言,网站设计中的任意一环节都不容忽视.时下,借助网上的一些资源,只需简单的几个步骤你就可创建出更具吸引力的设计,包括菜单.背景.动画.眉头.body等设计.响应式Web设计不仅能够适用于任何屏幕尺寸,还为用户带来更完美的体验,本文将分享十款最佳的响应式Web设计,助你大大简化工作流程. Gumby Framework

CSS3 Media Query实现响应式Web设计(针对不同移动设备宽度)

如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面.这种情况下,固定宽度的设计方案将会显得越发不合理.页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整.接下来,我们将了解一下怎样通过HTML5和CSS3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案 范例效果预览 首先,我们来看看本篇范

响应式Web设计(Responsive Web design)

中文名 响应式Web设计 提出时间 2010年5月 英    文 Responsive Web design 解    释 一个网站能够兼容多个终端 目    的 解决移动互联网的浏览 优    点 面对不同分辨率设备灵活性强等         页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等.无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动

响应式 Web 设计应该避免的错误

英文原文:Mistakes to Avoid With Responsive Web Design By Ramya Raju 当下,尤其是几乎人人都有一台智能手机或者平板电脑的时候,开发手机端用户体验友好的网站的重要性不言而喻.其结果是,企业所有者会因为这样的交互 网站设计能够给不同平台下(桌面端到手机端到平板电脑)的用户带来不一般的体验而去触碰交互式web设计这一想法.开发一个带有响应式交互设计的网站变得 非常有意义,因为其可以在不同的设备运行,因此,你可以节约针对不同平台开发不同网站的成本

【01】《响应式Web设计:HTML5和CSS3实战》

[01] (魔芋:已看完.) [01]<响应式Web设计:HTML5和CSS3实战>(非扫描版)(全).pdf 共246页. 2013年1月出版. 读后感:适合入门的书籍,对于响应式布局,用了一个例子来讲解.后半部分讲了一些CSS3的新属性.阴影,transform,transition等. [英]ben frain 著 王永强 译