响应式布局

最新推荐文章于 2024-05-14 22:10:55 发布

Paul_Chan_

最新推荐文章于 2024-05-14 22:10:55 发布

阅读量297

点赞数

分类专栏：其他

本文链接：https://blog.csdn.net/weixin_43422861/article/details/89322226

版权

其他专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、在头部添加下面一行代码

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">

网页宽度默认等于屏幕宽度（width=device-width）
原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%
maximum-scale=1.0：最大可以放大的比例
minimum-scale=1.0：最小可以缩小的比例
user-scalable = 0：是否允许用户缩放（1为true,0为false）

2、元素宽高响应布局
①从html元素开始逐级用百分比设置width和height，必须每一级都要用百分比。或结合bootstrap来布局。
而且必须确保所有的元素内边距和边框包含在元素的宽度和高度间。

<head>
	。。。
	<style>
	*{
		padding:0px;
		margin:0px;
		box-sizing: border-box;//确保所有的元素边距和内边框包含在元素的宽度和高度间。
	
	}
	html,body{
		width:100%;
		height:100%;
	}
	</style>
	<script>
		// 设置html根元素标签的font-size的大小
	  	var width = document.documentElement.clientWidth;
	    document.getElementsByTagName("html")[0].style.fontSize=(width/19.20)+"px";
	</script>
</head>

注意： 结合使用bootstrap布局要注意bootstrap的内外边距

②在响应式布局中需要设定某div元素的宽高不变

<style lang="less" scoped>
#manage{
    width: 100%;
    height: 100%;
    #manageNav{
        height: 50px;
        width: 100%;
        background-color:rgba(20, 2, 122, 0.315);

    }
    #manageMain{
        width: 100%;
        height:calc(100% - 50px);//实现下边id为manageMain的div元素宽高自适应，而id为manageNav的元素高度不变
    }
}
</style>

3、字体使用相对大小
①使用rem
rem是根据html的根元素标签的font-size的大小来计算的。（完全不用担心设置父元素标签对子元素标签带来影响）。

 <style>
    html { font-size:100px; }
   .testDiv {  font-size:0.28rem; background:#ccc; }
 </style>
 <body>
     <div class="testDiv">hello world</div>
 </body>

②设置html的根元素标签的font-size的大小
方法一：头部添加

<script>
	// 设置html根元素标签的font-size的大小
  	var width = document.documentElement.clientWidth;
    document.getElementsByTagName("html")[0].style.fontSize=(width/19.20)+"px";
</script>

方法二：媒体查询@media根据不同分辨率设置html根元素的font-size属性，页面的字体便会根据不同分辨率响应不同字体大小。
有时Bootstrap等ui框架的css样式会覆盖掉媒体查询@media里的样式，这时就是给媒体查询@media里的样式加权重：
在这里插入图片描述

（尽量不要使用px设置字体大小，也尽量不要使用h1-h6标签）

4、字体行高设置使用百分比

line-height: 150%;

行高始终是字体高度的150%

5、图片自适应设置

img { 
    max-width: 100%; 
    height: auto; 
}

背景图片自适应处理：

div { 
    width: 100%; 
    height: 80%; 
    border: 1px solid red; 
    background-image: url('img_flowers.jpg'); 
    background-size: 100% 100%;     
}

背景图片将延展覆盖整个区域

6、内外边距自适应使用百分比

外边距

margin:30%;

百分比设置上、下、左、右外边距都是相对于父元素的width的大小

内边距

padding:20%;

和外边距一样，百分比设置上、下、左、右内边距都是相对于父元素的width的大小

7.垂直居中

参考：https://www.cnblogs.com/clj2017/p/9293363.html

Paul_Chan_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局

1、在头部添加下面一行代码<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">网页宽度默认等于屏幕宽度（width=device-width）原始缩放比例（initial-scale=1）...
复制链接

扫一扫

专栏目录