HTML/CSS
自适应网页怎么做？自适应网页制作方法
PetitQ
自适应网页是指网页根据用户浏览设备的头信息，自动变换网页的 CSS 参数，达到网不同浏览设置显示不同的网页版面的效果。自适应网页的原因就是使用 CSS3 中的@media 属性来判断变换的。在实际网页制作过程中，我们怎么制作自适应网页呢？下面介绍一下自适应网页制作方法。
第一步：在网页头信息中添加 meta 参数；
<meta content="width=device-width, initial-scale=1.0" name="viewport">
也想出现在这里？联系我们吧
这个 meta 参数可以告诉浏览器网页的初始大小，以及缩放比例。这也是制作自适应网页必需的 META 信息。
第二步：添加@media 信息；
@media 是 CSS3 推出的一个新特性，它能识别各种设备，通常类型值设为 screen。通过@media 可以定义不同宽高下的样式，比如当页面宽度小于 800px 之间时主体部分背景色变为蓝色。
@media screen and (max-width: 800px) {
main {background-color:blue;
}}
第三步：在@media 中填写不同的 CSS 样式，并且替换元素。
如导航栏，页面缩小时，导航栏项不可以减少，字体大小改变也会导致无法看清等问题，这些将其替换成 icon 图标，点击即出现导航栏。
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
