响应式网站设计

一、概念

 针对一个理想的视觉体验,同时嵌入各种基于互联网标准的技术使其更有弹性,更能适应不同的媒介的呈现。

 响应式网站是一个设计理念,是多种技术的综合体。

 响应式设计并不仅限于改变布局。通过媒体查询我们能够相当精确地对页面进行重构:包括在小屏幕上扩大链接的目标区,从而更好的遵循触摸屏的费茨定律;包括对某些元素有选择性地显示或隐藏,从而改善页面的导航功能;还包括设置响应式排字法,渐进地改变字体大小和行距,从而为显示设备提供最优化的阅读体验。

 三大技术成分:

  1. 弹性网格布局

  2. 弹性图片

  3. 媒介查询

二、优点与缺点

  1. 优点
     1. 减少工作量
      1. 网站、设计、代码、内容都只需要一份;
      2. 多出来的工作量只是JS脚本、CSS样式做一些改动;
     2. 减少时间
     3. 每个设备都能得到正确的设计
     4. 搜索优化

常见的CSS技巧(四)

一、inline-block

  display属性设置为inline-block的元素,会在每一个元素中间产生一个4px的间距(chrome下为8px),各个浏览器之间产生的这些空白并不相同,具体情况具体讨论。产生这个间距的原因不是浏览器出现了bug,而是浏览器将代码中的空白符渲染出来导致的。

  接下来我们上代码吧:

html代码:

1
2
3
4
5
6
<ul>
<li>我是一号</li>
<li>我是二号</li>
<li>我是三号</li>
<li>我是四号</li>
</ul>

css代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
* {
margin: 0;
padding: 0;
}
ul {
width: 500px;
height: 200px;
margin: 50px auto;
background-color: #ccc;
}
ul li {
display: inline-block;
width: 70px;
height: 60px;
margin-top: 50px;
background-color: #ffcc00;
text-align: center;
line-height: 60px;
}
ul li:first-child {
margin-left: 80px;
}
ul li + li {
border-left: 1px solid #FFF;
margin-left: -8px;
}

  在浏览器中打开我们写好的页面(本例为chrome浏览器中文版,版本号为51),并打开开发者调试工具。

  通常情况下,页面为我们展示的效果是下面这样的:

前端性能优化知识总结(一)

一.DNS寻址以及IP地址解析

1.URI:资源标识符,URL和URN是其子集。URL(统一资源定位符)通过描述资源的位置来表示资源;URN通过描述资源的名字来表示资源。

 URL由三部分组成,以 http://www.hans-leesun.com/xx/xx/index.html 为例:

  1. URL方案(http):告知web客户端怎样访问资源
  2. (www.hans-leesun.com):指的是服务器的位置
  3. (/xx/xx/index.html):资源路径

 即“方案://服务器位置/路径”。

2.下面我们以www.baidu.com为例:

  当你在浏览器中输入上述这个域名的时候,我们先解析(www.baidu.com.):域名是从右向左解析的.先解析的是.,.代表公网,之后解析到了.com 然后是子域名baidu,最后是www。

  很多人都想知道,当在浏览器中输入一个url到浏览器为我们呈现出页面的这个过程中究竟发生了什么,以下是我个人对此的理解:

  当你在浏览器中输入一个url的时候,这个url会在你的浏览器里种下一个cookie。每当你在该页面登录的时候,该页面会发送的请求会带着这个cookie一起到服务器,服务器会根据这些信息帮你返回你个性化定制的界面。如果你是第一次打开这个网页,则浏览器会发送请求到存储该url的DNS的服务器,服务器会返回一个响应,浏览器则根据这个响应确定接下来应该如何渲染页面或者进行其他的操作。

  如果看官们觉得不够清楚明晰,可以移步这里或者这里

二. 前端页面渲染流程

1.HTML页面请求:
 1. HTML文档下载
 2. HTML文档解析:
  1. DOM树生成:elements窗口展现的(所有的元素)
  2. Render树生成:(页面中见到的)
  3. 逐级解析DOM树:尽量减少页面的reflow
   1. 回流:
   2. 重绘:
   3. document.write会阻塞通道,不建议使用。(通道是指每个浏览器本身的能力)
   4. 图片加载可以显示用分辨率较低的图片
2.浏览器的JS引擎:
 1. V8(C++)是谷歌发布的开源JS引擎
 2. SpiderMonkey是Mozilla项目的一部分
 3. rhino(Java)使用纯Java写成的JS开源代码实现。它最常用于嵌入Java应用程序,一边为终端用户提供脚本的能力。

常见的CSS技巧(三)

一、辨识px,em,rem

  1. px:1px在浏览器中即为1个像素

  2. em:相对单位长度
    1.相对参照物为父元素的font-size;

    2.具有继承的特点;

    3.当所有的元素都没有设置font-size时,浏览器会有一个默认的em设置:1em = 16px。(这里的16px为chrome浏览器默认的字体大小)

  3. rem:相对单位长度
    1.相对参照物为根元素html

    2.参照物相对固定,如果html没有设置font-size,则浏览器会有一个默认的rem设置:1rem = 16px。

  4. 在chrome浏览器下,一般设置html元素的font-size为62.5%,即10px。在之后的样式代码书写中,如果需要用到em或者rem这样的相对单位长度设置,这样的安排会使后续的代码显得更为简单。

  5. 这里有一个小知识点需要注意一下,中文版的chrome浏览器有一个最小字号限制,即在中文版的chrome浏览器下,默认显示的最小字号为12px;而在英文版的chrome下,这个限制为10px

二、diplay:none与visibility:hidden之间的区别

  通常情况下,我们有两种隐藏元素的方式,一种为display:none,另一种为visibility:hidden。虽然这两种方法的效果相同,但二者本质上还是有一定的区别的。以下面的代码为例(测试环境为chrome浏览器,51版):

HTTP学习笔记(一)

1.状态码

  1. 100~199:信息状态码
    1. 100: Continue 说明收到了请求的初始部分,请客户端继续。
    2. 101: Switching Protocols 说明服务器正在根据库护短的指定,将协议切换成Update首部所列的协议
  2. 200~299:成功状态码
    1. 200: OK 请求没问题,尸体的主题部分包含了所请求的资源
    2. 201: Created 用于创建服务器对象的请求
    3. 202: Accepted 请求已被接受,但服务器还未对其执行任何动作
  3. 300~399:重定向状态码
    1. 300: Multiple Choices 客户端请求一个指向多个资源的URL时会返回这个状态码
    2. 301: Moved Permanently 在请求的URL已被移除时使用。相应的Location首部中因该包含资源现在所处的URL。
    3. 302: Found 客户端应该使用Location首部给出的URL来临时定位资源。将来的请求仍应使用老的URL。
    4. 304: Not Modified 客户端可以通过所包含的请求首部,使其请求变成有条件的。