响应式布局

最新推荐文章于 2023-09-26 22:47:59 发布

yanyihan16

最新推荐文章于 2023-09-26 22:47:59 发布

阅读量172

点赞数

分类专栏：布局

本文链接：https://blog.csdn.net/yanyihan16/article/details/90485303

版权

布局专栏收录该内容

2 篇文章 0 订阅

订阅专栏

viewport

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    //viewport是网页默认的宽度和高度,网页宽度默认等于屏幕宽度（width=device-width）,原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
    <title></title>
</head>

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

<!–[if lt IE 9]><script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]–>

DOM属性
(1).dom的宽度都是用%宽度
(2).字体使用相对大小（em或者rem），最后有em和rem的区别
(3).流动布局。各个区块的位置都是浮动的，不是固定不变的。

.main {float: right;width: 70%;}
.leftBar {float: left;width: 25%;}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

选择加载CSS

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="a.css" />
如果屏幕宽度小于400像素（max-device-width: 400px），就加载 a.css 文件

<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="b.css" />
如果屏幕宽度在400像素到600像素之间，则加载 b.css 文件。

CSS的@media规则

<style>
@media only screen and (min-width: 1200px) {}	页面大于1200时的样式

@media only screen and (min-width: 768px) and (max-width: 991px) {}	平板时的样式

@media only screen and (max-width: 767px) {}	手机时的样式 和 Mobile Menu

@media only screen and (-webkit-min-device-pixel-ratio: 1.3), 
	only screen and (-o-min-device-pixel-ratio: 13/10), 
	only screen and (min-resolution: 120dpi) {}	高清屏的样式
</style>

图片的自适应
除了使用css代码：

img { max-width: 100%;}
windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：
img { -ms-interpolation-mode: bicubic; }

还可以根据不同大小的屏幕，加载不同分辨率的图片
6. em和rem
em相对于父元素，rem相对于根元素。

<div>
    我是父元素div
    <p>
        我是子元素p
        <span>我是孙元素span</span>
    </p>
</div>
<style>
	div {
	  font-size: 40px;
	  width: 10em; /* 400px */
	  height: 10em;
	  border: solid 1px black;
	}
	p {
	  font-size: 0.5em; /* 20px */ 
	  width: 10em; /* 200px */
	  height: 10em;
	  border: solid 1px red;
	}
	span {
	  font-size: 0.5em;  
	  width: 10em;
	  height: 10em;
	  border: solid 1px blue;
	  display: block;
	}
</style>

如果实在Google，因为默认最小字体是12px，所以span的字体是12px,宽度是120px。

rem

<div>
    我是父元素div
    <p>
        我是子元素p
        <span>我是孙元素span</span>
    </p>
</div>
<style>
	html {
	    font-size: 10px;
    }
	div {
	    font-size: 4rem; /* 40px */
	    width: 30rem;  /* 300px */
	    height: 30rem;
	    border: solid 1px black;
	}
	p {
	    font-size: 2rem; /* 20px */
	    width: 15rem;
	    height: 15rem;
	    border: solid 1px red;
	}
	span {
	    font-size: 1.5rem;/* 15px */
	    width: 10rem;
	    height: 10rem;
	    border: solid 1px blue;
	    display: block;
	} 
</style>

一般常用：
像素（px）：用于元素的边框或定位。
em/rem：用于做响应式页面，建议使用rem，因为em不同元素的参照物不一样（都是该元素父元素），所以在计算的时候不方便，相比之下rem就只有一个参照物（html元素），这样计算起来更清晰。