关于HTML几种简单布局方式

---

前言

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)适合普通分辨率桌面