1.什么是响应式布局开发
2.viewport属性
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- width=device-width:设置HTML页面的宽度和设备的宽度一致 -->
<!-- initial-scale:设置初始缩放比例1:1(不放大也不缩小)-->
<!-- user-scaleable=no:禁止用户手动缩放 -->
</head>
<!-- 可参考<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
3.@media媒体查询实现响应式布局开发
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
4.REM响应式布局开发
rem是相对单位,相对于当前页面根元素(HTML)的字体大小设定的,例如:HTML字体大小是20PX,此时1REM=20PX
步骤一:设置根字体大小
html{
font-size:100px; //=>1rem=100px
//=>设定的值需要方便后期计算,16这种值是不方便把PX转换为REM的计算的;10太小了,浏览器最小字体12(我们写10它也是按照12来算,这样会导致偏差);
}
步骤二:根据当前设备的宽度和原始设计稿的宽度做对比,动态改变REM换算比例
步骤三:严格按照设计稿的尺寸来编写样式,只不过所有的样式使用REM为单位
.box1{
width:1rem;//=>100px
height:.57rem;
font-size:.28rem;
}
注意:换算比根据根字体大小换算!!!
比如我设根字体大小为100px,所以换算比为1rem=100px
最佳实例
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>响应式布局</title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- REM -->
<script>
~ function () {
/**
* computed:根据当前设备的宽度,动态计算出rem和px换算的比例
*/
function computed() {
//获取HtML元素
let HTML = document.documentElement,
//获取当前设备的宽度
DEVIVE_WIDTH = HTML.clientWidth;
//如果设备的宽度>=设计稿,我们则不再继续调整比例,按照设计稿大小来呈现即可
if (DEVIVE_WIDTH >= 640) {
HTML.style.fontSize = '100px';
return;
}
//按照重新调整的HTML的字体大小(计算出rem和px最新的换算比例)
HTML.style.fontSize = DEVIVE_WIDTH / 640 * 100 + 'px';
}
computed();
//监听浏览器大小改变事件:大小一旦改变,则执行computed重新计算rem和px的换算比例
window.addEventListener('resize', computed);
}();
</script>
</head>
<body>
</body>
</html>