html中图⽚⾃适应浏览器和屏幕，宽度⾼度⾃适应
1、(宽度⾃适应)：在⽹页代码的头部，加⼊⼀⾏viewport元标签。
<meta name="viewport" content="width=device-width,initial-scale=1"/>
viewport是⽹页默认的宽度和⾼度，上⾯这⾏代码的意思是，⽹页宽度默认等于屏幕宽度（width=device-width），原始缩放⽐例（initial-scale=1）为1.0，即⽹页初始⼤⼩占屏幕⾯积的100%。
2、(字体⾃适应)：字体也不能使⽤绝对⼤⼩（px），⽽只能使⽤相对⼤⼩（em）。
body {font: normal 100% Helvetica, Arial,sans-serif;}
3、(流动布局)：各个区块的位置都是浮动的，不是固定不变的。
.main {float: right;width: 70%; }
.leftBar {float: left;width: 25%;}
float的好处是，如果宽度太⼩，放不下两个元素，后⾯的元素会⾃动滚动到前⾯元素的下⽅，不会在⽔平⽅向overflow（溢出），避免了⽔平滚动条的出现。
4、(⾃适应⽹页设计)：的核⼼，就是CSS3引⼊的MediaQuery模块。
它的意思就是，⾃动探测屏幕宽度，然后加载相应的CSS⽂件。
<link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="tinyScreen.css"/>
上⾯的代码意思是，如果屏幕宽度⼩于400像素（max-device-width: 400px），就加载tinyScreen.css⽂件。
<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="smallScreen.css"/>
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css⽂件。
html网页设计css5、(规则 )：同⼀个CSS⽂件中，也可以根据不同的屏幕分辨率，选择应⽤不同的CSS规则。
@media screen and (max- width: 400px) {}
6、(图⽚⾃适应 )：在html⾥⾯插⼊图⽚，如果想让图⽚⾃适应屏幕的⼩⽽不是宽⾼固定不变可以在css代码⾥加⼊
img{height: auto; width: auto\9; width:100%;}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。