[读书笔记]响应式web设计
[读书笔记]响应式web设计
荣少爷 发表于3年前
[读书笔记]响应式web设计
  • 发表于 3年前
  • 阅读 583
  • 收藏 19
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

致谢

    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/ 


标签: 响应式 html5 css3
共有 人打赏支持
荣少爷
粉丝 103
博文 77
码字总数 83378
×
荣少爷
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: