恒河沙科技代码笔记响应式.pptxVIP

响应式

网页布局

固定布局

特点：有一个版心，有一个固定值；

优点：所有的终端看上去显示效果一样；

缺点：显示终端过大，左右会出现空白；显示终端过小，可能出现显示不全；

流式布局

特点：以百分比为单位；

弹性布局

特点：以“份”为单位，大量运用到rem这个单位

当前响应式特点

如果用电脑看，会自动跳转到电脑端，如果用手机等移动终端看，会自动跳转到移动端；

响应式布局

响应式布局最大的特点，单位以百分比的形式，根据设备的大小而自适应；

根据不同的设备显示不同效果；

响应式出现原因

当前移动端的迅速发展，移动端设备已经大大超过了pc端；

CSS3的出现，移动端对css3支持非常好；

移动端的浏览器内核比较简单，几乎所有的手机都是用这两个内核：欧朋的内核，-webkit（谷歌和苹果共用）

最大最小

Min-width最小宽度

Max-width最大宽度

Min-height最小高度

Max-height最大高度

单位emrem

em字体大小是根据父元素字体大小设置的。

rem的大小是根据根标签（html）下的字体大小进行计算的

rem的特点

当我们改变根目录下的字体大小的时候，下面字体都改变

rem不仅可以设置字体的大小，也可以设置元素宽、高等属性

视口标签

metaname=viewportcontent=width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=noid=viewport/

width=device-width声明实际宽度为设备的宽度

initial-scale=1.0初始化的缩放大小，1.0不进行任何的缩放

minimum-scale=1.0允许用户缩放的倍数，1.0不允许缩小

maximum-scale=1.0允许用户放大的倍数，1.0不允许放大

user-scalable=no是否允许用户缩放，no不允许用户缩放

媒体查询

媒体查询也称作为媒介查询，media查询，它是专门用于制作移动端网站的；当用户设备的宽度为某一个范围，调用相应的css

media

一般来说，设备分为三种，一种手机端540以下；另外一种pad端541~960；第三种就是pc端960以上

外链式媒体查询

linkrel=stylesheethref=red.cssmedia=(max-width:540px)

linkrel=stylesheethref=green.cssmedia=(min-width:541px)and(max-width:980px)

linkrel=stylesheethref=blue.cssmedia=(min-width:981px)

内嵌式媒体查询

@mediascreenand(max-width:540px){

.box{

}

}

@media(min-width:541px)and(max-width:979px){}

@mediascreenand(min-width:980px){}

响应式网站的步骤：

1.先引入视口标签

2.进行媒体查询，不同的宽度调用不同的css样式；

谢谢观看