WEB前端 | H5基础——(4)流式布局、响应式布局、Viewport

来源：互联网发布：java match.group 编辑：程序博客网时间：2024/05/21 15:02

一、流式布局

<!doctype html><html><head><meta charset="utf-8"/><title>流式布局</title><style type="text/css">body {margin: 0;}.reddiv {width: 30%;/*单位vw ViewWidthvh ViewHeight*/height: 30vw;background-color: red;}.big {}.big span {font-size: 2em;}</style></head><body><!-- 流式布局百分比布局1、宽高设置百分比2、宽高设置VW VH3、弹性图片(给宽度，高度会自适应，不失真)4、em/rem(都是倍数，em相对于父级，rem相对于html)--><!-- <div class="reddiv"></div> --><img src="http://img.taopic.com/uploads/allimg/121009/235045-12100Z31P150.jpg" width="50%" alt=""><div class="big"><span>我是span标签</span></div></body></html>

二、响应式布局

<!doctype html><html><head><meta charset="utf-8"/><title>响应式布局</title><style type="text/css">/*@media媒体查询、媒体选择screen 屏幕and 后面跟条件*//*通过媒体查询可以设置多套布局，具体使用哪一套，就是根据媒体查询的条件来定(条件就是and后面的括号and 和括号之间要有空格)*/@media screen and (max-width:150px) {.div1 {background-color: gold;}}@media screen and (min-width: 150px) and (max-width:300px) {.div1 {background-color: red;}}@media screen and (min-width: 300px) and (max-width:600px) {.div1 {background-color: blue;}}@media screen and (min-width: 600px) and (max-width:900px) {.div1 {background-color: green;}}@media screen and (min-width: 900px) and (max-width:1200px) {.div1 {background-color: pink;}}@media screen and (min-width:1200px) {.div1 {background-color: black;}}.div1 {width: 400px;height: 400px;}</style></head><body><div class="div1"></div></body></html>

三、Viewport

<!doctype html><html><head><meta charset="utf-8"/><title>viewport</title><!-- viewport 可视区域 width 宽度，可以理解为设置我们的网页一个屏幕能看到的宽度maximum-scale 放大的最大值(网页能放大几倍)minimum-scale 缩小的倍数(网页最小能缩小多少倍)initial-scale=1.0 页面初始值(一般是1.0)user-scalable=0 是否允许用户缩放(1可以，0不可以)(苹果设备，需要的图片像素一般是物理像素的2倍，或3倍)target-densitydpi  值越高看的越清楚device-dpi  设备原本的dpihigh-dpi高dpilow-dpi低dpivalue 指定一个具体数值，取值范围 70 - 400 --><meta name="viewport" content="width=device-width,maximum-scale=2.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=1,target-densitydpi=high-dpi"><style type="text/css">body {margin: 0;}.reddiv {width: 210px;height: 80px;background-color: red;border: 1px solid blue;}</style></head><body><label for="name">姓名</label><input type="text" id="name"/><div class="reddiv"></div></body></html>

2 0

WEB前端 | H5基础——(4)流式布局、响应式布局、Viewport

一 、流式布局

二、响应式布局

三、Viewport

一、流式布局