1.浏览器内容
第三方浏览器有：sogo浏览器、360浏览器、qq浏览器、UC浏览器
内核：
360浏览器：Webkit和 Trident
qq浏览器：x5内核（基于开源内核Webkit开发）
UC浏览器：u3内核（基于开源内核Webkit开发）
sogo浏览器：sogo浏览器有高速模式（Webkit）和兼容模式（Trident）
x5内核：
X5内核是腾讯基于优秀开源Webkit深度优化的浏览器渲染引擎。为QQ浏览器、微信、手机QQ等2万多家App提供稳定安全的增强浏览服务,目前已经成为中国移动互联网上Web端事实上的标准
2.媒体查询
21.viewport（视口）：
a: layout viewport (布局视口 ,可理解为页面宽度）
b: visual viewport （可视视口，可理解为屏幕大小）
c: ideal viewport （理想视口）
那在移动端上的自适应，我们要做的就是 使布局视口和可视视口大小一致，这样的话用户就可以不用手动的去缩放页面啦。
而能起到这个作用的代码就是：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2.2 mediaquery （媒体查询）：
2.3 屏幕 Breakpoint（响应式断点）选择：
可参考 Bootstrap 和 Semantic UI
如何使用呢？有两种使用方式，link 标签引入，或者直接在style样式里设置。
以设计一个适应 手机、ipad、pc 端的布局为例
1.link 标签引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式布局</title>
<link rel="stylesheet" href="./css/main.css" type="text/css" media="screen and (min-width:993px)" />
<link rel="stylesheet" href="./css/ipad.css" type="text/css" media="screen and (min-width:769px) and (max-width:992px)"/>
<link rel="stylesheet" href="./css/iphone.css" type="text/css" media="screen and (max-width:768px)"/>
</head>
<body>
<div class ="container">
<header class="header">header</header>
<main class="main">main</main>
<footer class="footer">footer</footer>
</div>
</body>
</html>
此时在 main.css 、ipad.css 、iphone.css 样式文件设置相应布局需要的样式就可以了，需要注意的是，后面引入的样式会覆盖前面的样式，上面例子中，如果 main.css 和 iphone.css 都对同一个class 做了设置，那么 iphone.css 会覆盖main.css的。
例如：
// main.css
.container{
width: 100%;
}
.header{
height: 200px;
background: #f00;
font-size: 24px;
font-weight: 600;
color: #555
}
.main{
background: #00f;
}
.footer{
height: 100px;
background: #0f0;
}
// iphone.css
.header{
height: 60px;
font-size: 13px;
}
.footer{
height: 60px;
}
利用这个特性，如果我的网站时以pc端为主的，那么我的样式设置大多都写在main.css 下，而iphone.css 只是重置一些在手机屏幕下的适配的修改。
2.在style中引入
<style>
.container{
width: 100%;
}
.header{
height: 200px;
background: #f00;
font-size: 24px;
font-weight: 600;
color: #555
}
.main{
height: 1000px;
background: #00f;
}
.footer{
height: 100px;
background: #0f0;
}
// ipad
@media screen and (min-width: 769px) and(max-width:992px){
.header{height: 80px;font-size: 16px;}
.footer{height:80px;}
}
// iphone
@media screen and (max-width: 768px){
.header{height: 60px;font-size: 13px;}
.footer{height:60px;}
}
</style>
当然也可以把media 分开写，例如
<style>
.container{
width: 100%;
}
.header{
height: 200px;
background: #f00;
font-size: 24px;
font-weight: 600;
color: #555
}
@media screen and (min-width: 769px) and(max-width:992px){
.header{height: 80px;font-size: 16px;}
}
@media screen and (max-width: 768px) {
.header{height: 60px;font-size: 13px;}
}
.footer{
height: 100px;
background: #0f0;
}
@media screen and (min-width: 769px) and(max-width:992px){
.footer{height:80px;}
}
@media screen and (max-width: 768px) {
.footer{height:60px;}
}
</style>
个人更倾向于这样分开写，这样后期维护的话特别时在一些比较大的项目中样式特别多的时候，每个样式的适配都写在同一块，就不用满页面的去搜索了。
注意：media加单位px才生效
3.记一些乱七八糟的
项目文件：
humans.txt //网站信息（开发）
robots.txt //网站信息（搜索引擎）// Useer-agent:(爬虫) 、 Disallow:/admin/
.gitkeep //需要版本管理的文件
.gitignore //不需要版本管理的文件
例如：操作系统生成的文件（DS_Store、MasXOS）
日志文件
IDE的原始文件（idea）
node_module
等...
LICENSE.txt // 版权声明、协议内容
CHANGLOG.md // 项目每个版本的更新（说明版本号、更新内容、修复问题）
README.md // 项目简介、使用方式、相关连接
readme.md 结构：
Getting Started:
Welcome
New Features
Compatibility（兼容性）
Library
Files included （文件结构）
Dependecies（依赖项）
4.记一些乱七八糟的
font-size下限： chrome浏览器下 英文 10px、中文12px
font-line 下限： chrome浏览器下 英文10px 、中文12px (所以行高不推荐用rem来设置)
设 ul.content .item
选中除第一个item以外的其他item: ul.content .item + .item{}
网友评论