首页手记 web前端-响应式网站开发

web前端-响应式网站开发

标签：

Html/CSS Html5 JavaScript

响应式网站开发

媒体查询

媒体属性
1. width: 视口宽度
2. height:视口高度
3. device-width:渲染表面的宽度，就是设备屏幕的宽度
4. device-height:设备屏幕的高度
5. orientation:检查设备处于横向还是纵向
6. aspect-ratio:基于视口宽度和高度的宽高比
7. device-aspect-ratio:设备宽高比
8. color:每种颜色的位数bits如：min-color:16位
9. resolution:检测屏幕或打印机的分辨率
逻辑操作符
1. not
2. and
3. or
4. 逗号(,)效果等同于or
5. only: 防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式：
```
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
```

（1）加only，老的浏览器不认识，认为media="only",后面css的不会执行，媒体查询不起作用；
（2）不加only，老的浏览器会认识media="media",此时后面的样式会直接执行而忽略了媒体查询条件，可能会导致样式错乱。

建议都加上only

viewport视口
桌面浏览器只有一个视口，就是主窗口的区域（显示网页内容的区域）
手机浏览器有三个视口：
布局视口（layout viewport）
（1）布局视口固定不变，现在的手机移动端基本是980px

可视视口（visual viewport）
（1）可视视口：手机上显示的网页的视口，缩放会改变可视视口的大小。
理想视口（ideal viewport）
（1）理想视口就是布局视口在一个设备上的最佳尺寸。通常是我们说的屏幕分辨率
（2）
<meta name="viewport" content="width=device-width;initial-scale=1.0;minimum-scale=1.0;maximum-scale=1.0;user-scalable=no;"
响应式网站设计实践原则
渐进增强

优雅降级
浏览器的选择

断电区域性选择
（1）：小屏幕0-480px
（2）：中屏幕481-800px
（3）：大屏幕801-1400px
（4）：高清屏1400px +

如何组织项目目录结构

约定优于配置
约定代码结构或命名规范来减少配置数量

PC端样式

像素

px
em：相对的长度单位
1. em 相对参照物为父元素的font-size
2. 具有继承性的特点
3. 当没有设置font-size时，浏览器会有一个默认的em设置：1em = 16px;
4. em的缺点，容易混乱
rem
1. rem的相对参照物为根元素html，由于参照物固定不变所以比较好计算
2. 当没有设置font-size时，浏览器会有一个默认的rem设置：1rem=16px，这点与em是一致的。

隐藏文字的css技巧，

.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
注：该方法的作用是为了优化SEO，比如只想让标题中显示图片，不显示文字，但是为了搜索引擎的优化，又需要在标题中包含文字，那么可以加上text-hide样式来把文字隐藏掉
<h2 class="text-hide">关于我们<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="aboutus.png"></h2>

清除浮动


.clearfix:after,.clearfix:before{
content:"";
display:table
}
.clearfix:after{
clear:both;
}
.clearfix{
zoom:1;
}


***
##IDE技巧
***
- Emmet
1. 快捷嵌套 >  +  ^ *  ()
2. div#container.con[data-val] ===>

```html
<div id="container" class="contain" data-val=""></div>

ul>li.item$*5 ===>

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

ul>li.item${$}*5

<ul>
    <li class="item1">1</li>
    <li class="item2">2</li>
    <li class="item3">3</li>
    <li class="item4">4</li>
    <li class="item5">5</li>
</ul>

lorem20： 20个无意义文本补全

webstrom
1. ctrl + shift + v：打开历史剪贴板，可以复制以前复制过得内容
2. ctrl + y：删除当前行 delete line
3. ctrl+alt+enter：在代码上面添加一行
4. ctrl +减号/加号：折叠/打开代码
5. ctrl+shift+减号/加号：代码全部折叠或展开
6. ctrl+退格键：删除当前行
7. alt+shift+上下键：移动代码
8. ctrl+m：移动到标签头/尾位置
9. ctrl+e：最近使用的文件
10. ctrl+alt+左键：回到上次光标编辑的位置
11. ctrl+alt+右键：前进到上次光标编辑的位置
12. shift+光标选中图片地址：代码中预留图片属性
13. shift+F6：重命名
流行的响应式框架
1. bootstrap
2. foundation 结构语义化，可以定制
3. semantic ui 命名语义化，ui样式比较多
4. pure.css 轻量级