如何设计一个html页面的导航栏在手机端自适应_随笔

用以下代码开头：

<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">

使用百分比定义宽度，，

CSS代码可以适当使用：

@media only screen and (max-width:449px){

}

自动根据屏幕像素调用不同的CSS代码。

"自适应网页设计"的核心，就是CSS3引入的MediaQuery模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

扩展资料：

自适应网页设计（Adaptive Web Design）指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。

2010年，Ethan Marcotte提出了“自适应网页设计”(Responsive Web Design)这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个范例，里面是六个主人公的头像。

如果屏幕宽度大于1300像素，则6张图片并排在一行。如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。如果屏幕宽度在400像素以下，则6张图片分成三行。

欢迎分享，转载请注明来源：内存溢出

如何设计一个html页面的导航栏在手机端自适应