响应式网站开发说明


概念

响应式网站是一个设计理念,是多项技术的综合体:包括:flexible grid layout 弹性网格布局;flexible image 弹性图片;media queries 媒体查询

优点与缺点

优点

  • 减少工作量
    ①:网站,设计,代码,内容都需要一份
    ②:多出来的工作量只是js脚本,css样式的改动
  • 节省时间
  • 每个设备都能得到正确的设计
  • 搜索优化

等等…(增加用户体验)

缺点

  • 会加载更多的样式和脚本资源
  • 设计比较难精确和控制
  • 老版本浏览器兼容不是很好

需掌握的技术及各浏览器的市场份额

技能

  1. 基础知识:HTML,CSS,JavaScript

浏览器

  1. 浏览器的市场份额统计(国内的)
    alt
  2. 浏览器的市场份额统计(全球的)
    alt

根据浏览器所占的比例看适当处理浏览器的兼容性问题

媒体查询(media-query)

css2 就已经出现

<link rel="stylesheet" type="text/css" href="site.css" media="screen">
<link rel="stylesheet" type="text/css" href="site.css" media="print">

当时只是为了区分在屏幕显示还是打印

在css3被增强了,增加了一些媒体类型和函数

@media all and (min-width:800px) and (orietation-landscape){
	......
}
all:为媒体类型,默认为all
and:逻辑操作符,连接的作用。还有:not(一般处理整个表达式的值,如果有','只处理到','号) ,only(处理老的浏览器),or, ,(等同于or)

css3媒体属性

  • width: 视口的宽度
  • height: 视口的高度
  • device-width: 渲染表面的宽度,就是设备屏幕的宽度
  • device-height: 渲染表面的高度,就是设备屏幕的高度
  • orientation: 检查设备处于横向还是纵向
  • aspect-ratio: 基于视口的宽度和高度的宽高比 width/height 如:16/9,4/3
  • device-aspect-ratio: 渲染表面的宽高比,就是设备屏幕的宽高比
  • color: 每种颜色的位数bits,如:min-color:16位,8位
  • resolution: 检查屏幕或打印机的分辨率 如:min-resolution:300dpi

以上属性都可以添加 min-或 max-的前缀

视口的说明:视口宽度和设备宽度的区别:
1:桌面浏览器只有一个视口,就是浏览器主窗口的区域,显示网页的区域.
2:移动设备有三个视口的概念:

  • 布局视口—layout viewport(先把页面在布局视口布局虚拟模拟完全显示出来,我们看不到,一般规定的和pc页面的宽度(960px)一致,默认为厂商的默认值)
  • 可视视口— visual viewport(网页在手机上呈现出来的宽度高度,用户缩放会改变可视视口的大小,不是固定的值.默认宽度是屏幕的宽度)
  • 理想视口— ideal viewport(就是布局视口在一个设备上的最佳尺寸,该视口下的页面便于浏览器浏览,阅读,一般设置为设备宽度)
    理想视口使用方法"
    1
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,use-scalable=no"/>

设计图分析

  • 和设计师交流网站如何交互
  • 是否有相应的设计规范(字体,颜色,字号,间距等)
  • 什么地方必须100%还原,什么地方可以灵活处理
  • 分析哪些地方是可变的,哪些地方是不变的
  • 分析结构,可以达到代码复用
  • 布局分析
  • 切图

设计实践原则

  • 渐进增强 or 优雅降级
  • 首先针对小屏幕设计 or 首先针对大屏幕设计
  • 确定支持的浏览器
  • 不管设备的大小,应包含相同的内容 or 根据设备的大小,显示不同的内容
  • 断点选择—媒体查询的临界点