文章目录
前言
RelatedWords(本章单词)
viewport:视口 | media query:媒体查询 | screen:屏幕 | flex:弯曲、收缩
|direction:方向、趋势 | flow:流动、连贯|width-device:设置宽度
|scale:缩放|justify:整理版面|column:列|rule:规定|gap:间隙|initial:最初
一、响应式布局(Responsive layout)
1.响应式布局是什么?
响应不同设备screen的适配,适应其screen size。
2.怎么使用响应式?
(1).弃用px改用em或%为单位
(2).使用viewport
viewport属性:
属性 | 说明 |
---|---|
width | 设置layout viewport宽度为一个正整数或字符串"width-device" |
height | 设置layout viewport的高度为一个正整数或字符串"height-device" |
initial-scale | 页面初始值为一个数字,可以带小数 |
user-scalable | 是否允许用户进行缩放,值no或yes,no不可以,yes可以 |
minimum-scale | 最小缩放值为一个数字,可以带小数 |
maximum-scale | 最大缩放值为一个数字,可以带小数 |
viewport语法
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
meta标签作用是让当前视口的宽度等于设备宽度
二.媒体查询(Media queries)
1.media queries是什么?
是相应式布局的一个利器,一般主要作用是设置浏览器分辨率,还有其他(A设备宽和高,B渲染窗口宽和高C设备手持方向D画面比例E设备比例G对象颜色或颜色列表)
media queries属性:
属性 | 说明 |
---|---|
all | 所有设备 |
braille | 盲文 |
projection | 幻灯片 |
tv | 电视 |
…
语法:
@midia 设备名 only (选取条件) not (选取条件) and (设备选取条件){css样式规则}
在link中使用@media:
(1)适合普通分辨率桌面