WEB前端 | H5基础——(4)流式布局、响应式布局、Viewport
2016-09-22 19:53
211 查看
一 、流式布局
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>流式布局</title> <style type="text/css"> body { margin: 0; } .reddiv { width: 30%; /* 单位 vw ViewWidth vh ViewHeight */ height: 30vw; background-color: red; } .big { } .big span { font-size: 2em; } </style> </head> <body> <!-- 流式布局 百分比布局 1、宽高设置百分比 2、宽高设置VW VH 3、弹性图片(给宽度,高度会自适应,不失真) 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 设备原本的dpi high-dpi 高dpi low-dpi 低dpi value 指定一个具体数值,取值范围 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>
相关文章推荐
- 响应式布局基础三:webapp布局
- viewport和流式布局
- 响应式布局--流式布局
- 静态布局、自适应布局、流式布局与响应式布局的区别
- H5前端基础——布局
- 布局的几种方式(静态布局、自适应布局、流式布局、响应式布局、弹性布局)
- CSS布局基础之二认识Viewport
- 静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别
- 移动web(一)移动web基础知识点、流式布局
- Android-自定义控件基础-流式布局
- 响应式布局基础二:设置viewport
- h5学习之10(html中页面内容布局的方法流式布局,浮动布局,定位布局,弹性布局)
- H5基础知识第八课时(flex布局)
- 关于静态布局、自适应布局、流式布局、响应式布局、弹性布局的一些概念
- Css+Div布局学习(一)—Div布局基础
- 网页制作中常用的基础知识002-CSS布局与表格布局的区别
- DIV+CSS布局基础:HTML标记(二)
- CSS+Div布局总结-基础篇
- 创建一个流式的网站布局
- 网页设计中排版与布局小基础