好久没写响应式页面了，这个是之前公司的一个项目。今天打开了设计文档，按照设计文档的要求大体做了一下。当然里面是存在细节问题的。如图：（基础讲解见我另一篇博客https://blog.csdn.net/xiasohuai/article/details/81147763）
这个效果如何实现呢？当然首选的就是 “媒体查询@media”了 。
媒体查询应当怎么写呢？
CSS样式分为：内联式css样式、嵌入式css样式、外部式css样式
方式一（嵌入式css样式——这种是不推荐的，这样会使得html页面代码太繁琐）：
<style type="text/css">
@media screen and (max-width:768px){
}
@media screen and (min-width:768px){
}
@media screen and (min-width:1024px){
}
@media screen and (min-width:1200px){
}
</style>方式二：（外部式css样式）
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="./font_icons/fonts.css">
<link rel="stylesheet" type="text/css" href="./css/common.css">
<link rel="stylesheet" media="screen and (max-width:768px)" href="./css/phone.css" />
<link rel="stylesheet" media="screen and (min-width:768px)" href="./css/tablet.css" />
<link rel="stylesheet" media="screen and (min-width:1024px)" href="./css/desktop.css" />
<link rel="stylesheet" media="screen and (min-width:1200px)" href="./css/desktop_hd.css" />
</head>
注：书写顺序一定不能差
效果图上，你会看到，随着像素变小，左边导航变没了。上面header的图标呈现出来。如何实现的呢？
当然就要用display:block和display:none了
扫描二维码关注公众号，回复：
2885837 查看本文章
