首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[读书笔记]响应式web设计 转

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

作者头像
LeoXu
发布2018-08-15 14:44:00
3.6K0
发布2018-08-15 14:44:00
举报
文章被收录于专栏:LeoXu的博客LeoXu的博客

致谢

    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/ 

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2014/06/26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 致谢
  •     Ethan Marcotte 响应式网页设计之父 
    • 1 RWD,Responsive Web Design
    • 2 媒体查询,支持不同的视口
    •  3 拥抱流式布局 
    •  4 响应式设计中的Html5 
    •  6 用CSS3创造令人惊艳的美 
    •  7 css3 过渡、变形和动画 
    •  8 html5表单 
    •  9 解决跨浏览器问题 
    相关产品与服务
    内容识别
    内容识别(Content Recognition,CR)是腾讯云数据万象推出的对图片内容进行识别、理解的服务,集成腾讯云 AI 的多种强大功能,对存储在腾讯云对象存储 COS 的数据提供图片标签、图片修复、二维码识别、语音识别、质量评估等增值服务。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档