响应式布局分为三部分:
(1)流式布局
(2)媒体查询
(3)响应式布局
- 1流式布局(百分比布局)
流式布局又叫百分比布局.宽高定位位置都以百分数参照父标签相应的尺寸.margin,padding的
top right bottom left 都为百分数. 盒子模型里面的margin padding 无论是上下还是左右,
都是拿长度除以父标签的宽度,而不是高度,因为响应式里面高度很少设置.
算结果最少保留五位有效数字
三方面
//宽高
//字号 字号单位用em或者rem
em的数值参照其父标签,
rem的数值参照根(html)标签里的字号,建议使用rem.在html设置字号大小,每次需要修改在html的css样式改字号就整体改变字号了,不用每每个地方都自己去改.
//图片(弹性图片)
bgckground-size:100% 100%;
- 2媒体查询
<!--媒体查询的宽高指的是"设备可视化宽高!"-->
第一种写法引入css文件例子
<link rel="stylesheet" type="text/css" href="css/pagea.css"
media="only screen and (min- 961px)"/>
<link rel="stylesheet" type="text/css" href="css/pageb.css"
media="only screen and (min-481px ) and (max- 960px)"/>
<link rel="stylesheet" type="text/css" href="css/pageac.css"
media="only screen and (min- 320px) and (max- 480px)"/>
或者直接在css里面布局
@media only screen and (min- 961px){
body{
background-color: red;
}
}
@media only screen and (min-481px ) and (max- 960px) {
body{
background-color: yellow;
}
}
@media only screen and (min- 320px) and (max- 480px) {
body{
background-color: blue;
}
- 3响应式布局
所有网页响应式布局代码都是这一句.要用直接复制粘贴就可以.
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,user-scalabe=0">
<!--
赋值为固定像素或者某个特殊的值,比如device-width.
指的是100%时的像素
height:和width一样
initial-scale=1.0,第一次加载网页时显示的比例.
maximum-scale=1.0:允许用户手动缩放的最大比例
user-scalable=0.值为0代表不允许用户手动缩放.
这段代码的意思是:
让viewport的分辨率等于物理设备上的真实分辨率,
不允许用户修改,可以保证显示效果真实细腻.
-->
这是我自己总结了响应式布局的基本内容,了解理论就需要实践练习来加强自己的能力了.
如有不足之处请点出,希望我的总结对刚入门新手能有点帮助