作者:Ben Frain

学习时间   2016/5/12


第一章   设计入门

*视口调试工具

IE:Microsoft Internet Explorer Develop Toolbar

Safari:Resize

Firefox:Firesizer

Chrome:Windows Resizer

*在线创意源泉

响应式设计创意收集网站   http://mediaqueri.es

第二章:媒体查询,支持不同的视口

<!--该检测中,只要满足screen projection 两个条件中的任意一个条件,就执行文件-->
<link rel="stylesheet" media="screen and(orientation:portrait) and (min-width:800px),projection "
href="800width-portration.css">

还有一种方式是@import

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

*媒体查询能查询哪些特征

#width: 视口宽度

# height: 视口高度

# device-width: 设备屏幕的宽度

# device-height: 设备屏幕的高度

# orientation: 检查设备处于横向还是纵向

# aspect-ratio:基于视口宽度高度的宽高比

# device-aspect-ratio: 屏幕的宽高比

# color: 颜色的位数

# color-index: 设备的颜色索引表中的颜色数

# monochrome

#resolution

#scan

#grid

*加载媒体查询的最佳方法

Respond.js是为IE8及更低版本增加媒体查询支持的最快的js工具,但是无法解析@import 命令

*重置样式

Eric Meyer  的重置样式表(http://meyerweb.com/eric/tools/css/reset

针对HTML5 有更好的选择,normalize.css(http://necolas.github.com/normalize.css/)

第三章:拥抱流式布局

*将 px 换成 %  em,这样的相对单位,公式

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

目标元素尺寸/上下文元素尺寸=百分比尺寸

*设置自适应图片

为不同的屏幕尺寸提供不同大小的图片,方案  Adaptive Images   ,   http://adaptive-images.com

*CSS网格系统    快速布局

columnal(http://www.columnal.com)

第四章:响应式设计中的HTML5

*样板文件  (http://html5boilerplate.com

*响应式视频   FitVids  插件

第五章:CSS

*@fant-face  的使用

网页字体:https://www.fontsquirrel.com/

*自动添加私有前缀的脚本  prefixfree

*渐变生成器 http://www.colorzilla.com/gradient-editor/

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

*可缩放图标  @font-face 图标,将常用字符做成特定字体   http://fico.lensco.be/    http://www.iconfont.cn/

*CSS3动画   transform  transition  animation 的用法

第八章:HTML5 CSS3征服表单

1:required   是否必填 ,required aria-required=“true”

<form>
<label for="a"></label>
<input id="a" name="a" type="text" required aria-required="true"></input>
</form>

2:autofocus , 让表单在加载完成后有一个表单被自动聚焦

<form>
<label for="b"></label>
<input id="b" name="b" type="text" required aria-required="true" autofocus></input>
</form>

3:autocomplete , 自动完成

<form>
<label for="b"></label>
<input id="b" name="b" type="text" required aria-required="true" autocomplete="off"></input>
</form>

4:list 出现备选值

<form>
<label for="b"></label>
<input id="b" name="b" type="text" list="alist"></input>
<datalist id="alist">
<section>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
</section>
</datalist>
</form>

5:email

<form>
<label for="e"></label>
<input id="e" name="e" type="email" ></input>
</form>

6:number

<form>
<label for="f"></label>
<input id="f" name="f" type="number" ></input>
</form>

7:url

<form>
<label for="g"></label>
<input id="g" name="g" type="url" ></input>
</form>

8:tel

<form>
<label for="h"></label>
<input id="h" name="h" type="tel" ></input>
</form>

9:search

<form>
<label for="i"></label>
<input id="i" name="i" type="search" ></input>
</form>

10:pattern

<form>
<label for="j"></label>
<input id="j" name="j" pattern="([a-zA-Z]{3,30}\s*)+[a-zA-Z]{3,30}"></input>
</form>

11:color

<form>
<label for="j"></label>
<input id="j" name="j" type="color"></input>
</form>

12:date  month  week time  datetime  datetime-local

<form>
<label for="h"></label>
<input id="h" name="h" type="date"></input>
</form>

13:range

<form>
<label for="k"></label>
<input id="k" name="k" type="range" min="1" max="100" onchange="showValue(this.value)" value="5"><span id="range">5</span></input>
</form>
<script type="text/javascript">
function showValue(newvalue){
document.getElementById('range').innerHTML=newvalue;
}
</script>

* webshim 解决 部分浏览器不支持H5 CSS3 的问题

<script src="js/jquery.js"></script>

<script src="js-webshim/minified/polyfiller.js"></script> 

<script>
// load and implement all unsupported features
webshims.polyfill(); // or only load a specific feature
//webshims.polyfill('forms es5');
</script>

《响应式Web设计—HTML5和CSS3实战》 学习记录的更多相关文章

  1. Python灰帽子:黑客与逆向工程师的Python编程之道|百度网盘免费下载|新手黑客入门

    百度网盘免费下载:Python灰帽子:黑客与逆向工程师的Python编程之道 提取码:tgpg 目录  · · · · · · 第1章 搭建开发环境 11.1 操作系统要求 11.2 获取和安装Pyt ...

  2. Python灰帽子:黑客与逆向工程师的Python编程之道PDF高清完整版免费下载|百度云盘

    百度云盘免费下载:Python灰帽子:黑客与逆向工程师的Python编程之道PDF高清完整版免费下载 提取码:8nki 目录  · · · · · · 第1章 搭建开发环境 11.1 操作系统要求 1 ...

  3. 《灰帽Python-黑客和逆向工程师的Python编程》学习记录

    ctypes是Python语言的一个外部库,提供和C语言兼容的数据类型,可以很方便的调用C DLL中的函数. 操作环境:CentOS6.5 Python版本:2.66 ctypes是强大的,强大到本书 ...

  4. 【Python灰帽子--黑客与逆向工程师的Python编程之道】我的学习笔记,过程.(持续更新HOT)

    我的学习笔记---python灰帽子 世界让我遍体鳞伤,但伤口长出的却是翅膀. -------------------------------------------- 前言 本书是由知名安全机构Im ...

  5. python核心编程学习记录之映射和集合类型

    字典是python里唯一的映射类型

  6. python核心编程学习记录之Python对象

    比较符号如<,>,=比较的是对象的值 如果要比较对象本身要用is,is not repr()的功能与''所做的事情是一样的 Python不支持的类型有char,byte,指针,short, ...

  7. python核心编程学习记录之基础知识

    虽然对python的基础知识有所了解,但是为了更深入的学习,要对python的各种经典书籍进行学习 第一章介绍python的优缺点,略过 第二章介绍python起步,第三章介绍python基础,仅记录 ...

  8. Python大神成长之路: 第一次学习记录

    一.Python发展史 二.Python2 or 3 博主选择了Python3. 从官网下载Python  www.python.org Windows安装python3.5.python2.7.安装 ...

  9. 流畅的python第十九章元编程学习记录

    在 Python 中,数据的属性和处理数据的方法统称属性(attribute).其实,方法只是可调用的属性.除了这二者之外,我们还可以创建特性(property),在不改变类接口的前提下,使用存取方法 ...

  10. 流畅的python第四章文本和字节序列学习记录

    字符问题 把码位转化成字节序列的过程是编码,把字节序列转化成码位的过程是解码 把unicode字符串当成人类可读的文本,码位当成机器可读的, 将字节序列编程人类可读是解码,把字符串编码成字节序列是编码 ...

随机推荐

  1. python字符串,列表,字典的常用方法

    本篇内容 字符串的常用方法 列表的常用方法 字典的常用方法 字符串的常用方法 center 字符居中显示,指定字符串长度,填充指定的填充字符 string = "40kuai" p ...

  2. python函数的参数传递问题---传值还是传引用?

    摘要:在python中,strings, tuples, 和numbers是不可更改的对象,而list,dict等则是可以修改的对象.不可更改对象的传递属于传值,可更改对象属于传引用.想要在函数中传递 ...

  3. DIV 和 SPAN 区别

    DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表(共同点). 两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素). 详解:1 ...

  4. 浏览器缓存(Egret项目实例分析)

    参考文章: 浏览器缓存机制:http://web.jobbole.com/82997/ 浏览器缓存机制:http://www.cnblogs.com/skynet/archive/2012/11/28 ...

  5. 第三弹:ZFNet

    在所有深度网络中,卷积神经网和图像处理最为密切相关,卷积网在很多图片分类竞赛中都取得了很好的效果,但卷积网调参过程很不直观,很多时候都是碰运气.为此,卷积网发明者Yann LeCun的得意门生Matt ...

  6. Android L(5.0)源码之图形与图像处理之动画——Frame、Tween、属性动画、SurfaceView

    工作中暂时还没涉及到,暂时先不总结

  7. P4语言编程快速开始 实践一

    参考:P4语言快速开始 感谢杨老师的分享! 前言及P4程序请参考原文,本文主要是对文章中的两个动手实例的实践记录. 1.通过behavioral-model运行simple_router样例 执行命令 ...

  8. php 实例说明 socket通信机制

    php 实例说明 socket通信机制 张映 发表于 2010-04-24 分类目录: php 一,socket是什么 什么是socket 所谓socket通常也称作"套接字",用 ...

  9. UVa 10653 - Bombs! NO they are Mines!!

    题目大意:给你一个二维迷宫,给定入口和出口,找出最短路径. 无权图上的单源最短路,用BFS解决. #include <cstdio> #include <queue> #inc ...

  10. github上一些酷炫效果

    转自:http://blog.csdn.net/shulianghan/article/details/18046021 主要介绍那些不错个性化的View,包括ListView.ActionBar.M ...