《响应式Web设计—HTML5和CSS3实战》 学习记录
作者: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实战》 学习记录的更多相关文章
- Python灰帽子:黑客与逆向工程师的Python编程之道|百度网盘免费下载|新手黑客入门
百度网盘免费下载:Python灰帽子:黑客与逆向工程师的Python编程之道 提取码:tgpg 目录 · · · · · · 第1章 搭建开发环境 11.1 操作系统要求 11.2 获取和安装Pyt ...
- Python灰帽子:黑客与逆向工程师的Python编程之道PDF高清完整版免费下载|百度云盘
百度云盘免费下载:Python灰帽子:黑客与逆向工程师的Python编程之道PDF高清完整版免费下载 提取码:8nki 目录 · · · · · · 第1章 搭建开发环境 11.1 操作系统要求 1 ...
- 《灰帽Python-黑客和逆向工程师的Python编程》学习记录
ctypes是Python语言的一个外部库,提供和C语言兼容的数据类型,可以很方便的调用C DLL中的函数. 操作环境:CentOS6.5 Python版本:2.66 ctypes是强大的,强大到本书 ...
- 【Python灰帽子--黑客与逆向工程师的Python编程之道】我的学习笔记,过程.(持续更新HOT)
我的学习笔记---python灰帽子 世界让我遍体鳞伤,但伤口长出的却是翅膀. -------------------------------------------- 前言 本书是由知名安全机构Im ...
- python核心编程学习记录之映射和集合类型
字典是python里唯一的映射类型
- python核心编程学习记录之Python对象
比较符号如<,>,=比较的是对象的值 如果要比较对象本身要用is,is not repr()的功能与''所做的事情是一样的 Python不支持的类型有char,byte,指针,short, ...
- python核心编程学习记录之基础知识
虽然对python的基础知识有所了解,但是为了更深入的学习,要对python的各种经典书籍进行学习 第一章介绍python的优缺点,略过 第二章介绍python起步,第三章介绍python基础,仅记录 ...
- Python大神成长之路: 第一次学习记录
一.Python发展史 二.Python2 or 3 博主选择了Python3. 从官网下载Python www.python.org Windows安装python3.5.python2.7.安装 ...
- 流畅的python第十九章元编程学习记录
在 Python 中,数据的属性和处理数据的方法统称属性(attribute).其实,方法只是可调用的属性.除了这二者之外,我们还可以创建特性(property),在不改变类接口的前提下,使用存取方法 ...
- 流畅的python第四章文本和字节序列学习记录
字符问题 把码位转化成字节序列的过程是编码,把字节序列转化成码位的过程是解码 把unicode字符串当成人类可读的文本,码位当成机器可读的, 将字节序列编程人类可读是解码,把字符串编码成字节序列是编码 ...
随机推荐
- python字符串,列表,字典的常用方法
本篇内容 字符串的常用方法 列表的常用方法 字典的常用方法 字符串的常用方法 center 字符居中显示,指定字符串长度,填充指定的填充字符 string = "40kuai" p ...
- python函数的参数传递问题---传值还是传引用?
摘要:在python中,strings, tuples, 和numbers是不可更改的对象,而list,dict等则是可以修改的对象.不可更改对象的传递属于传值,可更改对象属于传引用.想要在函数中传递 ...
- DIV 和 SPAN 区别
DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表(共同点). 两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素). 详解:1 ...
- 浏览器缓存(Egret项目实例分析)
参考文章: 浏览器缓存机制:http://web.jobbole.com/82997/ 浏览器缓存机制:http://www.cnblogs.com/skynet/archive/2012/11/28 ...
- 第三弹:ZFNet
在所有深度网络中,卷积神经网和图像处理最为密切相关,卷积网在很多图片分类竞赛中都取得了很好的效果,但卷积网调参过程很不直观,很多时候都是碰运气.为此,卷积网发明者Yann LeCun的得意门生Matt ...
- Android L(5.0)源码之图形与图像处理之动画——Frame、Tween、属性动画、SurfaceView
工作中暂时还没涉及到,暂时先不总结
- P4语言编程快速开始 实践一
参考:P4语言快速开始 感谢杨老师的分享! 前言及P4程序请参考原文,本文主要是对文章中的两个动手实例的实践记录. 1.通过behavioral-model运行simple_router样例 执行命令 ...
- php 实例说明 socket通信机制
php 实例说明 socket通信机制 张映 发表于 2010-04-24 分类目录: php 一,socket是什么 什么是socket 所谓socket通常也称作"套接字",用 ...
- UVa 10653 - Bombs! NO they are Mines!!
题目大意:给你一个二维迷宫,给定入口和出口,找出最短路径. 无权图上的单源最短路,用BFS解决. #include <cstdio> #include <queue> #inc ...
- github上一些酷炫效果
转自:http://blog.csdn.net/shulianghan/article/details/18046021 主要介绍那些不错个性化的View,包括ListView.ActionBar.M ...