响应式开发

 

 

响应式网站概念

viewport 视口

 

 

 

 

 

1.响应式网站概念

1.flexible grid layout  弹性网格布局

2.flexible image   弹性图片

3. media queries 媒体查询

 

 

2.viewport 视口

<meta name="viewport" content="width=device-width" />

 

 

3.如何实现PC端额样式

 

em  相对的长度单位

em相对参照物为父元素的font-size

em具有继承的特点

当没有设置font-size时，浏览器会有一个默认的em设置：1em=16px

 

rem的相对参照物为根元素的html,相当于参照固定不变的比较好计算

当没有设置font-size时，浏览器会有一个默认的rem

设置：1rem=16px,这点与em是一致的

 

font-size:62.5%  1rem=10px  (10/16*100%)

font-size:100%  1rem = 16px

 

 

4.媒体查询

@media only screen and (max-width:800px){

}

@media only screen and (min-width:481px) and (max-width:800px){

}

@media only screen and (max-width:480px){

}

媒体查询级别比css要高，是按照浏览器来转换的，

如果把800px使用rem,换算还是1rem=16px;

 

 

5.响应式图片

js或服务端实现

 

js:

srcset

srcset配合sizes

picture

svg:------AI软件，在线editor.method.ac

 

picturefill这个库可以用来响应式图片处理

 

 

css resets

 

 

 

 

 

 

Emmet写法关键字

>  + ^  *  ()

#  .  []

$

{}  lorem