响应式初认识

1. 以桌面电脑为中心的设计思想,应该转变成为未知设备而设计的思想。首先为最小的可视区域设计版式然后在此基础上渐进增强用户体验。

2.如果预算充足且形势需要,做一个真正的“手机版”是网站是首选。(完全专注移动平台、为移动设备用户提供不同内容/体验的解决方案称之为“移动网站”。)这样就可以基于用户的设备、位置、连接速度,以及包括技术特性在内的其他变量来提供不同的内容、设计和交互。

3.响应式设计是将已有的三种开发技巧(弹性网格布局、弹性图片、媒体和媒体查询)整合起来得到的。

一句话概括响应式:针对任意设备对网页内容进行完美布局的一种展示机制。

4. 下载视口调试工具

引导客户:网站不必在所有浏览器中表现一致。

5. 是否要采取做响应式的网站?

  • 客户是否想支持互联网用户增长最迅猛的市场?如果想,那响应式方法就很适合;
  • 客户是否想要最简洁、快速且易于维护的代码, 如果想,那响应式方法就很适合;
  • 客户能否理解用户体验可以且本应该根据浏览器不同而不同? 如果可以理解,那响应式方法就很适合;
  • 客户是否要求设计效果在所有浏览器中都保持一致,包括IE8以及更低版本? 如果是,那响应式方法就不适合;
  • 该网站的当前或预期客户中,是否有百分之七十以上的人可能使用IE8及更低版本, 如果是,那响应式方法就不适合;

6.打你接受新项目,不论响应式是否合适,应试着向客户说明几点:

  • 允许页面显示效果在老旧浏览器中有细微的差别,这样代码更易维护,将来更新的成本更低;
  • 让页面元素在那些老旧浏览器中表现一致会导致网站增加大量的图片,是网站变慢,制作成本变高且更难维护;
  • 现代浏览器可以理解的简洁代码等同于更快速的网站。快速响应的网站在搜索引擎中的评级高于慢腾腾的网站;
  • 使用老旧浏览器的用户越来越少,使用现代浏览器的用户越来越多——我们应该支持大多数!
  • 更重要的是,支持现代浏览器,就能尽情享受响应式网页设计,能响应不同设备的不同浏览器窗口。

7. 视口是指浏览器窗口内的内容区域,不包含工具栏、标签栏等。也就是网页实际显示的区域。

屏幕尺寸指的是设备的物理显示的区域。

有些浏览器调整工具显示的尺寸包含浏览器的其他元素,如地址栏、标签栏和搜索栏,有些工具则不是

时间: 2024-08-10 06:52:08

响应式初认识的相关文章

响应式:为什么百度、淘宝之类的大公司网页不使用响应式,而是独立开发一套手机页面?

响应式设计不是万能的,它有一定的好处,但也有一定的弊端.先给出结论:如果开发资源充裕,不应该考虑使用响应式设计来同时支持移动端和桌面端. 因为响应式最大的优点就是开发快.打个比方,移动端和桌面端的开发时间分别是 t,采用响应式设计写一个同时支持两者的网站可能只有 1.2t. 那为什么开发资源充足的情况下,不应该采取响应式设计来同时支持移动端和桌面端呢? 1. 响应式设计带来大量冗余代码.在移动端充斥着 webkit 内核的浏览器的时代,响应式设计的网站中却不得不带有大量兼容旧 IE 的代码.移动

响应式Web图形篇 —— icon fonts 的探析及应用

前言 像素完美(Pixel Perfection).分辨率无关(Resolution Independent)和多平台体验一致性是设计师们的追求. 可访问性(Accessability).加载性能和重构灵活性是前端工程师们关心的主题. 当下互联网设备「风起云涌」,显示分辨率「层出不穷」,为 Web 创建者们带来越来越多的难题. 需要为高PPI(aka Retina)显示设备准备@1.5x.@2x.@3x的图片素材: 需要针对不同显示屏分辨率来调整优化排版: 需要考虑多个分辨率版本的图片的加载性能

手机响应式之rem

web app 变革之rem rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位

响应式的rem

rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其实很相似,只不过一

EDM模板编写踩坑指南(非响应式,纯table有源码)

如果问你table布局,你肯定会嗤之以鼻?什么table布局?不是早已经淘汰了吗?但是如果让你写EDM邮件模板,table布局相对来说是最好的选择. 如果让你立刻写EDM,你在网上搜的话,得到的信息相对较少,但是又很懵的话,建议你看看这篇文章,让你30分钟之内入门并开始写, 需要源码再私我吧~ 或许有人会问EDM是什么,Email Direct Marketing的缩写,即电子邮件营销.EDM模板就是你邮箱中的广告邮件,其实就是在邮件中写网页.但是EDM模板怎么书写.如果你在网上搜,或许你会搜到

【经验分享】响应式网站项目实操过程中的那些事儿

本次网站改版升级是我来到新公司的第一个项目,需求之初并没有提及要做响应式,在首次评审时领导和研发均认为响应式处理与我们网站相对契合,就这样我开始了我职场生涯中第一个响应式网站设计.下面就跟大家分享响应式网站设计中的那些事儿. 因为本人之前并没有接触过响应式设计,在项目开始前便恶补了一些响应式的基础知识.理论性资料网上众多,为了使各位对响应式有初步印象和认知,我在这里只做简单描述,各位若想要更全面深入的了解可自行百度. 1什么叫响应式设计,为什么要做响应式设计 (1)页面的设计和开发应当根据用户行

Java响应式编程 Springboot WebFlux基础与实战

第1章 课程介绍课程介绍及导学1-1 导学 第2章 函数式编程和lambda表达式本章介绍函数式编程的概念,和lambda表达式的基础语法,并分析了惰性求值的应用和实现.最后同意反编译字节码,重点剖析了lambda表达式的底层实现原理2-1 概念2-2 为什么要使用函数式编程-12-3 为什么要使用函数式编程-22-4 lambda初接触-12-5 lambda初接触-22-6 jdk8接口新特性-12-7 jdk8接口新特性-22-8 jdk8接口新特性-32-9 函数接口-12-10 函数接

浅谈Vue响应式(数组变异方法)

很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用对方法.虽然在官方文档中已经给出了方法,但是在下实在好奇的紧,想要解锁更多姿势的话,那就必须先要深入女神的心,于是乎才有了去探索Vue响应式原理的想法.(如果你愿意一层一层地剥开我的心.你会发现,你会讶异-- 沉迷于鬼哭狼嚎 无法自拔QAQ). 前排提示,Vue的响应式原理主要是使用了ES5的Obj

CSS之响应式布局

响应式布局 外部link的max.css #left { width: 50%; height: 100px; background-color: #FF6600; float: left; } #right { width: 50%; height: 100px; background-color: #3565ff; float: left; } 外部link的min.css #left { width: 100%; height: 100px; background-color: #FF66