[读书笔记]响应式web设计 转

致谢

    Ethan Marcotte 响应式网页设计之父 

    《义海倾情》 

1 RWD,Responsive Web Design

  • 伊桑.马科特 AList Apart 
  • 弹性网格布局,弹性图片,媒体和媒体查询 
  • 不再使用像素px,而是使用相对度量单位em或百分比 
  • 视口调试工具 Microsoft Iternet Explorer Developer Toolbar ,Safari RaiseMe,Resizer,Firefox Firesizer,Chrome Windows Resizer 
  • 网站  http://thinkvitamin.com  http://2011.dconstruct.org 
  • 响应式设计创意收集网站  http://mediaquery.es 
  • html5新增语义化标签元素:  header nav 
  • css3  http://www.csszengarden.com 
  • 圆角  border-radius 
  • 渐变  linear-gradient(yellow,blue) 
  • http://www.panic.com/blog/ 
  • http://demo.macrofolio.net/3d_animation_css3 
  • http://designlovr.com/examples/dynamic_stack_of_index_cards/ 

2 媒体查询,支持不同的视口

  •  语法: 

@media screen and (max-width:960px){ 

               } 

  • 可以将多个表达式组合在一起,用and连接   <link rel="style sheet" media="screen and (orientation : portrait) and (max-width:800px), projection" href="800wide-portrait-screen.css" /> 
  • 可以写一个媒体查询列表,用逗号分隔,其中一个为真,就加载样式表。 
  • 还可以在样式表里面使用媒体查询: 

@media screen and (max-device-width:400px){ 

       h1 { color:green} 

 } 

  • 还可以使用css的@import指令在当前样式表中按条件引入其它样式表: 

@import url("phone.css") screen and (max-width:360px); 

  • 可供媒体查询检测的特性: 

 width 视口宽度 

 height 视口高度 

 device-width 设备屏幕的宽度 

 device-height 设备屏幕的高度 

 orientation 横向还是纵向状态 

 aspect-ratio 视口的宽高比,如16/9 

 device-aspect-ratio 屏幕的宽高比 

 color 每种颜色的位数,如16 

 color-index 设备颜色索引表中的颜色数,必须是非负整数 

 momochrome 单色缓冲区中每像素所使用的位数,必须是非负整数,如2 

 resolution 分辨率,如 300dpi  118dpcm 

 scan 电视扫描方式,progressive 逐行 interlace 隔行 

 grid 检测输出设备是网格设备还是位图设备 

 上述除了scan和grid之外都可以使用min和max来创建一个查询范围 

  • 为ie8及更低版本加入媒体查询的工具:Respond.js 
  • 重置样式:用来覆盖不同浏览器渲染HTML元素时的各种默认样式。 

 Eric Meyer,Dan Cederholm 

  • 怎样阻止移动设备浏览器自动调整页面大小:基于Webkit核心的浏览器大多支持用viewport meta 元素覆盖默认的画布缩放设置,只需要在<head>标签中插入一个<meta>标签,其中可以设置具体的宽度或者缩放比例,下面是将页面方大到实际尺寸两倍显示的meta标签实例: 

 <meta name="viewport" content="initial-scale=2.0,width=device-width" /> 

 maximum-scale 最多放大倍数 

 minimum-scale 最少放大倍数 

 user-scalable=no 禁止缩放 

  • css正在引入能实现同样功能的@viewport 声明 

 3 拥抱流式布局 

  • 使用百分比布局创建流动的弹性界面,同时使用媒体查询来限制元素的变动范围。 
  • 将网页从固定布局转换成百分比布局 

 需要牢记的公式: 

目标元素宽度÷上下文元素宽度=百分比元素宽度 

  • 将文字大小从像素尺寸修改为相对单位em,实现文字缩放。 

 现代浏览器的默认文字大小都是16像素,一开始给body应用如下任意一条规则所产生的效果都一样: 

 font-size:100%; 

 fobt-size:16px; 

 font-size:1em; 

  • 百分比计算公式也适用于将文字的像素单位转换为相对单位em。 
  • 行高一般相对与元素本身的文字大小,而不是父元素的文字大小。 
  • em作为一种测量单位,指的是特定字母的宽度和高度相对于特定字体磅值的比例。 
  • 让图片随视口缩放 

 要先删除图片标签的宽度和高度属性,再设置百分比。 

 为防止弹性图片随视口拉大超出其原始尺寸,需要为其设置阈值,使用max-width,此条也适用于整个页面,防止其无限制扩张。 

  • 为不同的屏幕尺寸提供不同的图片 

 Filament Group的"响应式图片" 

 Matt Wilcox 的"自适应图片"√ 

 实现自适应图片需要Web服务器编程的辅助,准备Apache 2、PHP 5.x和GD库。 

  • css网格系统 

 框架:Sematic Skeleton LessFramework , 1140 css Grid,Colummal ,960.gs 

  • 常用网格类名: 

 row,container,alpha,omega(分别表示一行中的第一个和最后一个元素),col_x 

 4 响应式设计中的Html5 

  •  腻子脚本(polyfill)

具体指一段能给老版本浏览器带来新特性的Javascript代码,它会给你的代码里追加多余的代码。 

  • 轻量级增强脚本能让老版本IE支持新的HTML元素    Remy Sharp 
  • Modernizer 除了能让IE支持html5新元素以外,还能基于一系列新特性测试来有条件的加载更高级的腻子脚本,css文件,以及额外的js文件。 
  • html5样板文件:  http://html5boilerplate.com 

 <!doctype html> 

 <html lang="zh"> 

<meta charset=utf-8> 

  • 暂保留和非保留的html废弃零件 

 非保留:strike enter font acronym frame frameset 

  • html5的全新语义化元素: 

 <section>元素用来定义文档或应用程序中的区域或节 

 <nav>元素用来定义文档的主导航区域 

 <article>用来包裹独立的内容片段 

 <aside>元素用来表示与页面主内容松散相关的内容,经常可用做侧边栏,另外,引文、广告以及导航元素也可以使用它 

 <hgroup>:如果页面中有一组使用<h1>、<h2>、<h3>等标签的比标题、标语和副标题,则可以考虑使用<hgroup>将他们包裹起来。 

  • html5的大纲结构算法: 

 http://gsnedders.html5.org/outliner/ 

 http://hoyois.github.com/html5liner/ 

 <header>元素不计入大纲结构,所以不能用它来划分内容结构,而是应该用他来包含对区域内容的介绍说明。 

 <footer>页脚,博客文脚 

 <address>用来标注离其最近的<article>或<body>祖先元素的联系信息。 

  • html5中的文本级语义元素: 

 <b>、<em>强调内容的重点、<i> 

  • 遵循WAI-ARIA无障碍网页应用技术实现无障碍站点,让残障人士也能无障碍的访问网页上的动态内容。 

 http://www.w3.org/WAI/intro/aria 

           ARIA地标角色属性role: 

 application,banner,conplementary,contentinfo,form,main,navigation,search 

           使用非可视桌面阅读器(NVDA)测试网站可访问性:http://www.nvda-project.org/ 

           为使用了无障碍技术的元素设置样式:      nav[role="navigation"]{···} 

  • 嵌入视频:<video src="myVideo"></video> 

           video中可放入多个source标签,以适应不同浏览器对视频格式的支持,依次方法还可针对老浏览器设置备用视频,加入flash的标签,更进一步,还可以提供下载链接。 

  • 音频用audio标签 
  • 对于使用了iframe嵌入视频,要进行响应式设计,可以使用插件,如jQuery的FitVids 
  • 实现离线Web应用: 

 在html标签中使用manifest属性,制定离线内容设置文件xxx.manifest文件的位置,其MIME类型为text/cache-manifest 

 http://diveintohtml5.com 

  • CSS3:选择器,字体和颜色模式 

 私有前缀   http://leaverou.github.com/prefixfree/ 

 当前浏览器对特定CSS3和html5特性的支持程度:  http://caniuse.com 

 最近全球浏览器使用率统计:  http://gs.statcounter.com 

  • 多栏布局  column-width,column-count,column-gap,column-rule 

 http://www.w3.org/TR/css3-multicol/ 

  • 文字换行  word-wrap 
  • css3属性选择器 

 img[alt="atwi_oscar"] {···} 

  • 子字符串匹配属性选择器: 

 匹配开头选择器 Element[attribute^="value"] 

 匹配包含内容选择器  Element[attribute*="value"] 

 匹配结尾选择器  Element[attribute$="value"] 

  • CSS3结构伪类 

 first-child选择器  li:first-child  , li:last-child 

  • table布局属性 

 display:table 

 display:table-row 

 display:table-cell 

  • nth-child选择器  nav ul li:nth-child(even) a{···} 

 nth规则: 

 nth-child(n) 

 nth-last-child(n)  从文档末尾开始算 

 nth-of-type(n) 

 nth-last-of-type(n) 

 odd 

 even 

  • 否定选择器:not 
  • 对伪元素的修正:css3 

 要求对伪元素使用两个冒号以便与伪类进行区别,如 

 p::first-line 

 p::first-letter 

  • 字体格式  eot  ttf  svg  woff 

 使用@font-face嵌入网页字体 

 字体资源站点 www.google.com/webfonts  www.fontsquirrel.com  www.typekit.com  www.fontdeck.com 

 始终为应用了@font-face字体的标题元素设定font-weight属性,以防止字体模糊 

 6 用CSS3创造令人惊艳的美 

  • prefix私有前缀自动为css3规则追加浏览器私有前缀。 

 http://leaverou.github.com/prefix/ 

  • 文字阴影 

 text-shadow: 1px 1px 1px #cccccc 

 第一个值右侧阴影大小,第二个值下方阴影大小,第三个值模糊距离,第四个值颜色 

 使用负值可以制作出左上方阴影效果 

 删除第三个值可以去掉模糊效果 

 浮雕:   text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.75); 

 用逗号分隔的多组值就可以制作出多重的文字阴影。 

  • 盒阴影:和文字阴影用法一样 

 box-shadow: 0px 3px 5px #444444 

  • 内阴影: 

 box-shadow:inset 0 0 40px #000000 

  • 背景渐变 

线性的  background: linear-gradient(90deg,#ffffff 0%,#e4e4e4 50%, #ffffff 100%); 

 90deg:表示沿着90度垂直方向,也可以使用to top right这样的值 

径向的 background: radial-gradient(center, ecllise cover,#ffffff 72%,#dddddd 100%); 

 渐变形状:circle,ellipse 

 渐变大小:closet-side,closet-corner,fathest-side,fathest-corner,cover,contain 

 在线渐变生成器:  http://www.colorzilla.com/gradient-edit/ 

重复的background: repeating-linear-gradient(90deg,#ffffff 0px,hsla(0,1%,50%,0.1) 5px); 

 背景渐变图案  http://lea.verou.me/css3patterns/ 

  •  使用css预处理器轻松编写css3代码 :SASS,LESS 
  • 多重背景图片 

 background: 

      url('../img/1.png'), 

      url('../img/2.png'), 

      url('../img/3.png') left bottom ,black; 

  • 背景图片大小 

 background-size: 100% 50%, 300px 400px , auto; 

 预定义值:auto, cover,contain 

  • 背景图片位置 

 background:url('...') left bottom,black; 

  • @font-face图标 :将图标制作成字体,再使用@font-face引入 

 http://fico.lensco.be/ 

 7 css3 过渡、变形和动画 

  • 如何使用过渡声明: 

 transition: all 1s ease 0s 

 注意,过渡声明要放在过渡效果开始的元素上 

  • 过渡相关的属性 

 transition-property  要过渡的属性名称 

 transition-duration  定义过渡效果持续的时间,单位为s 

 transition-timing-function  定义过渡期间速度如何变化,ease linear ease-in ease-out ease-in-out cubic-bezier 

 transition-delay  可选,用于定义过渡开始前的延迟时间 

注意,有些属性无法实现过渡。 

  • 在不同的时间段内过渡不同的属性 

 #content a{ 

      ........; 

      transition-property: border, color,text-shadow; 

      transition-duration:2s,3s,8s; 

 理解过渡调速函数,其实都是某种贝塞尔曲线,本质上就是缓动函数 :http://cubic-bezier.com/ 

  • 响应式网站的有趣过渡  http://css-stricks.com/ 

 * { 

    transition:all 1s; 

 } 

  • 2D变形  transform 

 nav ul li a:hover { 

     transform: scale(1.7); 

 } 

 鼠标悬停时,放大到原始大小的1.7倍 

 如果在safari中应用此效果,需要给原始元素设置display:block; 

  • 我们能做哪些变形 

 scale 缩放 

 translate 移动 

 rotate 按一定角度旋转,单位deg 

 skew 沿x轴和y轴斜切,输入两个角度值 

 matrix 允许你按像素精度控制变形效果,它能让你将若干变形效果组合成单个声明 

 transform:matrix(1.678,-0.256,1.525,2.333,-51.533,-1.989); 

  • 傻瓜式的矩阵变形工具  http://www.useragentman.com/matrix/ 
  • 使用transform-origin属性来修改变形效果的起点: 

 transform:rotate(45deg); 

 transform-origin:20%  20% 

  • 3D变形 

 首先在父级元素上设置透视,开启3D场景:       perspective: 200 

 将transform-style设置为preserve-3d 

 添加翻转效果:      transform:rotateY(180deg); 

 翻转后隐藏背面的内容:      backface-visibility:hidden; 

 注意使用绝对定位来造成覆盖 

 对于不支持该效果的浏览器,使用降级方案,设置z-index值 

  • css3动画效果 

 由两部份组成:@keyframes 关键帧声明 和 该关键帧的使用 

 声明部分

 @keyframes warning { 
      0% { 
          text-shadow:…; 
      } 
      50% { 
           … 
      }  
       100% {   
           … 
      } 
 } 

 除了使用百分比,也可以使用from和to来定义开始和结束帧 

使用部分: animation: warning 1.5s infinite  ease-in; 

 也可以一个个单独列出来: 

 animation-name: warning; 

 animation-duration:1.5s; 

 animation-time-function:ease-in-out; 

 animation-iteration-count:infinite; 

 animation-play-state:running; 

 animation-delay:0s; 

 animation-fill-mode:none; 

 http://webdesignerwall.com/ 

 8 html5表单 

  • 首先表单被设定一个ID用于对应样式,然后包含一个html5的hgroup,用于表单标题和文字说明。 
  • 表单中的子区域都使用带有legend标签的fieldset来包裹。 
  • 每一个输入元素都有一个label元素与之对应,且一并包含在div中。 

 id name type placeholder 

  • required是一个布尔类型的属性,表明该表单域为必填项,如果提交时没有输入该项信息,则浏览器会显示警告信息,警告信息的显示方式取决于浏览器与输入框的类型。 
  • 为方便屏幕阅读用户,可以为输入框追加WAI-ARIA属性:aria-required="true"。 
  • range,color,button,hidden类型的输入元素都不能使用required,因为它们几乎都有默认值。 
  • autofocus 属性可以让表单加载完成时就有一个表单域被默认聚焦(或选中),以便于用户输入。 
  • autocomplete可以设置禁用(off)或开启(on)自动完成功能。 

 可以通过给form标签设置该属性来禁用整个表单的自动完成功能。 

  • list属性及其对应的datalist元素可以让用户在输入框中开始输入时,显示一组备选项。 

 在datalist标签中使用select包裹的option,方便为老浏览器提供降级方案。 

  • html5的新输入类型 

 在不引入额外js的前提下,限制用户输入的数据。 

 在不支持这些新特性的浏览器中,会被降级显示为一个标准的文本输入框。 

 type="email" 

 type="number" min max 

 type="url" 

 type="tel" 

 type="search" 

 pattern="[一个正则表达式]" 

 type="color" 

  • 日期和时间输入类型 

 type="date" 

 type="month" 

 type="week" 

 type="time" 

 type="datetime" 或 "datetime-local" 省略了时区信息。还可设置步增值 step="14000"。 

  • type="range" min  max   ,使用该类型目前可以使用js来显示当前值:onchange="showValue(this.value)"。 
  • 如何给不支持新特性的浏览器打补丁 

 Modernizr http://www.modernizr.com/  用于向缺少html5/css3特性支持的浏览器打补丁。 

 Webshim Lib http://afarkas.github.com/webshim/demos/ 

  • 使用css3美化html5表单 
  • 针对表单的css3伪类选择器 

 input:required 

 input:focus:invalid 

 input:focus:valid 

 9 解决跨浏览器问题 

  • http://www.andthewinnerisnt.com 
  • 渐进增强与优雅降级 

 优雅降级:为现代浏览器制作网站,然后保证为某些老版本提供基本可用的体验。 

 渐进增强:恪守Web标准的标签,在此基础上通过css样式和js来为更先进的浏览器提供渐进式的增强。 

  • Opera和Aaron Gustafson 
  • 可以使用html5验证工具来排除错误代码: 

 http://validator.nu 

 http://validator.w3.org 

  • IE Tester 

 http://www.my-debugbar.com/wiki/IETester/HomePage 

  • 给IE678追加min/max媒体查询功能 

 Response.js http://github.com/scottjehl/Respond 

  • 放置在IE条件注释中的垫片脚本,使其只针对IE特定版本加载: 

 <!--[if lte IE 8]> 

        <script src="js/response.min.js"/></script> 

 <![endif]--> 

  • 使用Modernizr按需加载资源 

 YepNop.js http://yepnopejs.com/ 

  • 必要时将导航链接转换为下拉菜单 

 http://css-stricks.com/convert-menu-to-dropdown/ 

 Responsive Menu  http://github.com/mattkersley/Responsive-Menu 

  • 应对高分辨率设备的未来趋势 

原作作者博客:

http://www.benfrain.com/ 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏AndroidTv

【Android】属性动画的使用理解

属性动画的教程网上已经特别多了,本篇也不打算再去各种详解知识点,主要就是记录题主学习属性动画时的碰到的一些困惑,以及后来自己的理解。如果有人也碰到相似的问题,正...

2873
来自专栏HT

基于HTML5 WebGL实现3D飞机叶轮旋转

在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D拓扑上的应用,今天我们就来讲讲叶轮旋转在3D上的应用。 在3D拓扑上可以创建各种各...

2368
来自专栏数据小魔方

数据地图系列10|excel(VBA)数据地图透明度填充法

今天要跟大家分享数据地图系列的第10篇——excel(VBA)数据地图透明度填充法。 这种方法的制作步骤难度与前一篇相比都较低,但是涉及到的VBA代码却要比前一...

6785
来自专栏前端黑板报

canvas-入门

定义 canvas是HTML5新增的一个重要元素,先看下它的定义: <canvas> is an HTML element which can be used ...

22310
来自专栏Coding迪斯尼

VUE+WebPack游戏设计:实现盒子爆破效果和界面美化

1613
来自专栏GIS讲堂

Geoserver2.11矢量切片与OL3中的调用展示

GIS的底图一直使用金字塔技术进行切图,使用户能够快速访问指定级别的地图或者影像。但是切图本身是一张图片,无法进行交互。于是又引入了矢量图层用来显示矢量点线面,...

1503
来自专栏瞎说开发那些事

RPA与Excel(DataTable)

方法: 直接调用invokeCode,入参为已定义好的DataTable,出参为去重后的DataTable,代码如下

1112
来自专栏Android机器圈

Android之MaterialDesign应用技术2-仿支付宝上滑搜索框缓慢消失

PS:在这之前也就是上一篇介绍了MaterialDesign一些滑动删除、标题栏的悬浮效果等,如果没看过第一篇的小火鸡可以看一下,因为这篇是接着上一篇写的,有一...

38910
来自专栏用户2442861的专栏

PyQt4中的布局管理 (入门较好2)

http://www.blogjava.net/glorywine/archive/2008/07/30/217842.html

1411
来自专栏hightopo

原 基于HTML5 WebGL实现3D飞机

1655

扫码关注云+社区