好久没写响应式页面了,这个是之前公司的一个项目。今天打开了设计文档,按照设计文档的要求大体做了一下。当然里面是存在细节问题的。如图:(基础讲解见我另一篇博客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了