时间：2023-10-01 04:00:02 | 来源：网站运营
时间：2023-10-01 04:00:02 来源：网站运营
自适应（电脑/平板/手机）网页，自适应网页设计练习总结：刚好写了个练习，应该是这种效果吧！
在线咨询
<meta name="viewport" content="width=device-width， initial-scale=1" />width=device-width：网页宽度默认等于屏幕宽度<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->②禁止使用绝对宽度（css中）width：10px； <!-- 这种代码不可行 -->可行：以下两种代码均可width: 20%;width:auto;③静止对字体使用固定大小（css中）font-size: 12px可行：以下代码均可行font-size:1.2em补充：浏览器的默认字体高都是16px，所以未经调整的浏览器在显示1em=16px。于是我们就可以通过这个等量关系进行计算了！若已经写好的网页字体的px直接除以16就是em了。body { font: normal 100% Helvetica， Arial， sans-serif;} <!--html中-->④得是流动布局（css中）#father .panel_text{ background-color: #F5F5F2; float: left; margin-left: -88%; margin-top: 15%; width:295%; height:200%; }⑤让网页选择适应屏幕的css，就像Java等语言中的if判断（在html中）<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="css/tinyScreen.css" />}else if（如果400像素<屏幕宽度<600像素）{<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px) and (max-device-width: 600px)" href="css/tinyScreen.css" />}@media screen and (max-width: 300px) { body { background-color:lightblue; }} 最后来个总结吧：印象最深的就是自适应的思维和物理学很近有木有！由于物体可以选取其他不同的东西做参考，所以物理书：“运动是绝对的，静止是相对的”那迁移到这个代码上也是一样啦！网页对应不同的屏幕标准得自动适应，那代码就得采用相对的，而不是绝对的！关键词：适应,练习,总结,设计,电脑,平板
