响应式网站设计(Responsive Web design)的理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及 使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局,无论用户正在使用笔记本还是iPad,我们 的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备。

响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式, 如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape),怎样才能做到让一种 设计方案满足所有情况?

基本原理: 媒体查询 @media

兼容IE可以使用JS辅助一下来解决

什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?的更多相关文章

  1. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

  2. 【css】25个漂亮的响应式布局的web设计【转】

    响应的web设计的做法是提高用户的浏览质量,并在不同设备上能够完美的浏览使用,就像大前端推出的D7主题.看看下面美丽的响应的网站布局,通过本文你会在以后的设计中找到响应的web设计的灵感. 1.Mar ...

  3. IT兄弟连 HTML5教程 响应式网站的内容设计

    基于响应式开发网站,除了页面的布局是我们设计的重点,网站中显示的图片和文字也是我们不能轻视的内容. 1  响应式图片显示内容设计 真正具有响应性的Web设计是完全调整网站以满足访问者的设备.我们需要在 ...

  4. 从Storm和Spark 学习流式实时分布式计算的设计

    0. 背景 最近我在做流式实时分布式计算系统的架构设计,而正好又要参加CSDN博文大赛的决赛.本来想就写Spark源码分析的文章吧.但是又想毕竟是决赛,要拿出一些自己的干货出来,仅仅是源码分析貌似分量 ...

  5. 网页设计简史看设计&代码“隔膜”

    本文来自网易云社区 作者:马宝 设计与代码之间隔膜所在?既然你诚心诚意地问了,我就大发慈悲地告诉你.为了防止地球被破坏,为了维护世界的和平,为了贯彻爱与真实的邪恶~,我是穿梭在前端与设计之间爱与美丽的 ...

  6. 企业 SOA 设计(1)–ESB 设计

    最近为公司完成了一个 ESB 的设计.下面简要说明一下具体的设计方案.   企业 SOA 整体方案 在前一篇<SOA.ESB.NServiceBus.云计算 总结>中说到,SOA 是面向服 ...

  7. (转)Android Binder设计与实现 – 设计篇

    原文地址(貌似已打不开):Android Binder设计与实现 – 设计篇 ------------------------------------------------------------- ...

  8. 理解交互设计之"行为设计与对象设计"

    本文是辛向阳教授在<装饰>杂志(大家可以关注这个权威杂志的公众号,分享给大家)2015年第1期公开发表的学术论文,文章探讨的是交互设计研究 思路的转变.这一转变不仅适用于交互设计,也适用于 ...

  9. android之intent显式,显式学习

    intent,意图 当从一个Activity到另一个Activity时调用,这里重点学习显式,隐式的使用 使用语句上的区别: 隐式意图:                 显式意图: setAction ...

随机推荐

  1. 警告: deleting object of polymorphic class type which has non_virtual destructor

    如果基类里有虚函数,定义了基类指针指向派生类,就会需要定义基类虚析构,这样,基类指针析构的时候,就会先析构派生类,再析构基类. 在用基类指针指向派生类时, 在基类析构函数声明为virtual的时候,d ...

  2. 存储过程详解 -SQLServer

    来源:http://www.cnblogs.com/knowledgesea/archive/2013/01/02/2841588.html 存储过程简介 什么是存储过程:存储过程可以说是一个记录集吧 ...

  3. Lichee ( 四 ) 打包IMAGE

    在<Lichee(三) Android4.0的目标产品文件夹与Lichee的纽带---extract-bsp>中我们分析了extract-bsp的作用和意义.到这里,我们能够開始编译And ...

  4. [Vue CLI 3] public 目录没用吗

    在 vue-cli 3 初始化的项目根目录下面:和 src 同级有一个 public 目录 官网的说明如下:https://cli.vuejs.org/zh/guid... 在下列情况下使用: 你需要 ...

  5. Contentprovider 注册 启动简单流程

    安装app时packagemanager 读取manixfest获取provider信息 存在数据库里流程:1.加载ActivityThread main方法,创建消息队列.ActivityThrea ...

  6. PHP核心编程--目录操作(包含文件操作)

    一.目录操作 1.    创建目录 创建目录mkdir(目录名称)  //返回值为布尔 一次性创建主目录及其子目录 判断是不是一个目录is_dir  //返回true,false 判断目录或文件是否存 ...

  7. 【转载】【python】python练手项目

    入门篇 1.Python - Python 图片转字符画 50 行 Python 代码完成图片转字符画小工具. &lt;img src="https://pic3.zhimg.com ...

  8. 为什么学习React Native三点原因

    React Native不到两岁,兼容Android平台刚刚1年.我学习React Native其实也就不到1年,不算长,也不算短. Paul Graham在文章中写过:大多数人真正注意到你的时候,不 ...

  9. linux中各目录及详细介绍

    一.Linux文件系统的层次结构 在Linux或UNIX操作系统中,所有的文件和目录都被组织成一个以根节点开始的倒置的树状结构,如图: 二.目录 1.目录的定义 目录相当于Windows中的文件夹,目 ...

  10. Node.js入门笔记

    第一步自然是安装了.我是用Webstorm这个ide,安装分2步: 1.安装nodejs,下载Windows下的安装版本号.注意是以msi为扩展名的,然后下一步.没啥好说的,下载地址例如以下: 32位 ...