响应式设计

 

不同设备设计顺序优先级

1、用户人群占主导，客户使用设备占有比大的人群优先。

2、客户使用设备占比平均的情况下，从大屏做到小屏， 做减法比做加法容易。

 

 

<meta name =”view port” content=”width:device-width,initial-scale=1”>

网页的宽度默认等于屏幕宽度。原始的缩放比例initial-scale=1

 

 

Media 的属性。

All：所有的媒体类型

Screen：电脑显示器

Handheld 便携式设备

Tv 电视类型设备

Print  打印预览视图。

 

媒介的使用方法

1、引用不同的样式表

<link rel=”stylesheet”   type=”text/css”   media=”(判断条件)”  href=”css样式表”/>

判断条件:(min-width:XXpx)  &  (max-width:XXpx)

 

2、执行不同的css样式

 

@media(判断条件){

符合条件的样式

}

 

Vw 屏幕的宽度。  Vh屏幕高度