之前写的两个页面都是PC端固定布局，现在进行对页面改进成移动端流体布局进行尝试。
一、首先先了解几个规范：在<meta>标签中加入
窗口设定：name="viewport"
页面大小屏幕等宽：width=device-width
初始缩放比例：initial-scale=1.0 （1.0）表示原始比例大小
允许缩放的最小比例：minimum-scale=1.0
允许缩放的最大比例：maximum-scale=1.0
用户是否可以进行缩放：user-scalable=no （no)表示不可以
二、实际操作部分
1.对头部导航栏固定
#header{top:0;z-index: 9999;position:fixed;
}
2.对图片的缩放
img{display:block;max-width:100%}
3.新单位rem 在html{}的CSS中设置62.5%相当于10px，但是在谷歌浏览器会出现偏差，统一解决方法就是设置625%，默认是100px，这样达到兼容。
4.box-sizing的使用 在对页面搜索输入框的定位中用到了这个元素，对搜索输入框在搜索栏区域的上下位置不好控制，所以直接采用了对DIV进行box-sizing:border-box;设置，使得div 设置的宽高将包含边框及 padding。
5.不同大小媒体查询 使用@media(min-width:XXXpx)and(max-width:XXXpx)的方式的方式来控制当用户使用不同大小的媒体来浏览页面是，属性样式的显示方式。也可以在其中加入某DIV内ID或者CLASS属性后，是指在相应条件下改变DIV的样式（如显示与否，颜色变换等）。
6.clearfix的使用。 在解决主体部分和FOOTER（高度自适应）的浮动排列问题，之前采用float的时候，主体和footer水平排列浮动，对两个部分采用margin则相互重合，clear:both则无法显示两个部分间距。所以采用了clearfix，相当于在中间又加了一个空白DIV，就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。（这个css的原理是经过使用 after伪对象,它将在应用clearfix的元素结尾添加content中的内容,也就是一个".",并且把他设置为块级元素 (display="block");高度设置为0,clear="both",然后将其内容隐藏掉(visibility="hidden").这样就会撑开此块级元素.）之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
属性：.clearfix:after { }
white-space:nowrap;//单行显示
overflow:hidden;//多余隐藏
text-overflow:ellipsis;//省略号代替
-webkit-line-clamp 是一个 不规范的属性，它没有出现在 CSS 规范草案中。
限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
display: -webkit-box;，将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient；，设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow；可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。 例：
overflow：hidden; display:-webkit-box; -webkit-line-clamp:2; //2行显示 -webkit-box-orient:vertical;
最后完成结果如下。
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>个人页面导航 移动端</title><style>html{font-size:625%;}body,h1,h2,h3,ul,ol,p,figure {margin: 0;padding: 0;}body {background-color: #f5f5f5;font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft YaHei UI","Microsoft YaHei",SimHei,"宋体",SimSun,Sans-Serif;font-size: 0.16rem;}ul,ol {list-style: outside none none;}a {text-decoration: none;color: black;}img{display: block;max-width: 100%;}div,figure{box-sizing: border-box;}.none {display: none;}.clearfix:after{content: ".";display: block;clear: both;height: 0;visibility: hidden;}#header {top:0;z-index: 9999;position: fixed;width: 100%;height: 0.45rem;background-color: #333;font-size: 0.16rem;}#header .link {height: 0.45rem;line-height: 0.45rem;color: #eee;}#header .link li {width: 33.3%;text-align: center;float: left;}#header .link a {color: #eee;display: block;}#header .link a:hover,#header .active a {background-color: #000;}#adver {max-width: 6.4rem;margin: 0 auto;padding: 0.45rem 0 0 0;}#search{max-width: 6.4rem;height: 0.33rem;margin: 0 auto;background-color: #ddd;padding: 0.03rem 0 0 0;position: relative;}#search .search{width: 95%;height: 0.27rem;border-radius:0.04rem;border: none;outline:none;background-color: #fff;display: block;margin: 0 auto;font-size: 0.14rem;padding: 0 0.05rem;}#search .button{display: block;outline: none;position: absolute;top: 0.03rem;right: 1%;cursor: pointer;width: 0.5rem;height: 0.27rem;color:#666;border: none;border-top-right-radius: 0.04rem;border-bottom-right-radius: 0.04rem;background-color: #eee;font-size: 0.14rem;}#menu{max-width: 6.4rem;margin: 0.1rem auto 0 auto;}#menu a:hover{color: green;}#menu h2{text-align: center;color: #666;font-size: 0.26rem;}#menu h3{text-align: center;color: #666;font-weight: normal;font-size: 0.16rem;margin: 0.05rem 0 0.1rem 0;}#menu figure{width: 50%;float: left;background-color: #eee;font-size: 0.16rem;padding: 0 0 0.05rem 0;position: relative;margin: 0.001rem auto;}#menu figure img{padding: 0.02rem;vertical-align: middle;border-radius: 0.04rem;}#menu figcaption{color: #666;font-size: 0.16rem;padding: 0.02rem 0.05rem;}#menu h4{font-weight: normal;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin: 0;text-align: center;}#menu .score{color: #f60;font-size: 0.3rem;letter-spacing: 0.01rem;text-align: center;display: block;}#menu .type{ // 标签width: 0.9rem;height: 0.25rem;line-height: 0.25rem;font-size: 0.14rem;text-align: center;color: #fff;background-color:#333;position: absolute;top:0.04rem;left: 0.04rem;}/*不同大小媒体查询，大于480px小于640px*/@media (min-width: 480px) and (max-width: 640px){#menu h2{font-size: 0.26rem;}#menu h3, #menu h4,#footer,#menu figure,#menu .score{font-size: 0.16rem;}}/*不同大小媒体查询，小于480px*/@media (max-width: 480px){#menu h2 {font-size: 0.20rem;}#menu h3,#menu h4,#footer,#menu figure,#menu .score{font-size: 0.14rem;}#footer{font-size: 0.12rem;}}#footer {max-width: 6.4rem;background-color: #222;color: #777;margin: 0 auto;text-align: center;padding: 0.1rem 0;}#footer .top {padding: 0 0 0.05rem 0;}</style></head><body><header id="header"><nav class="link"><h2 class="none">导航</h2><ul><li><a href="tencent://message/?uin=">启动QQ</a></li><li><a href="/" target="_blank">打开微信</a></li><li><a href="/" target="_blank">新浪微博</a></li></ul></nav></header><div id="adver"><img src="img/海岛.jpg" alt=""></div><div id="search"><form οnsubmit="return baiduWithHttps(this)" action="/baidu" target="_blank"><input name="tn" type="hidden" value="SE_zzsearchcode_shhzc78w"><a href="/" target="_blank"></a><input type="text" οnfοcus="checkHttps" placeholder="输入搜索相关内容" class="search" name="word" size="30"><button type="submit" value="搜索" class="button">搜索</button></form><script src="/r/www/cache/global/js/BaiduHttps_0714_zhanzhang.js"></script><script>function checkHttps () {BaiduHttps.useHttps();}function baiduWithHttps (formname) {var data = BaiduHttps.useHttps();if (data.s === 0) {return true;}else {formname.action = '/baidu' + '?ssl_s=1&ssl_c' + data.ssl_code;return true;}}</script></div><div id="menu"><hgroup><h2>常用板块</h2><h3>资讯，娱乐，购物等</h3></hgroup><div class="container"><figure><a href="/" target="_blank"><img src="img/腾讯.jpg" alt=""><h4>中国浏览量最大的中文门户网站</h4><figcaption><span class="score">腾讯网</span></figcaption></a><div class="type">腾讯</div></figure><figure><a href="/" target="_blank"><img src="img/sina.jpg" alt=""><h4>为全球用户24小时提供全面及时的中文资讯</h4><figcaption><span class="score">新浪网</span></figcaption></a><div class="type">新浪</div></figure><figure><a href="/" target="_blank"><img src="img/网易.jpg" alt=""><h4>最有态度的网站</h4><figcaption><span class="score">网易</span></figcaption></a><div class="type">网易</div></figure><figure><a href="/" target="_blank"><img src="img/虎嗅.png" alt=""><h4>带给你最新的资讯</h4><figcaption><span class="score">虎嗅</span></figcaption></a><div class="type">虎嗅</div></figure><figure><a href="/" target="_blank"><img src="img/知乎.png" alt=""><h4>知无不言</h4><figcaption><span class="score">知乎</span></figcaption></a><div class="type">知乎</div></figure><figure><a href="/" target="_blank"><img src="img/36kr.jpg" alt=""><h4>为创业者提供最好的产品和服务</h4><figcaption><span class="score">36氪</span></figcaption></a><div class="type">36kr</div></figure><figure><a href="/" target="_blank"><img src="img/人人都是产品经理.jpg" alt=""><h4>产品经理、产品爱好者学习交流平台</h4><figcaption><span class="score">人人都是产品经理</span></figcaption></a><div class="type">人人都是产品经理</div></figure><figure><a href="/" target="_blank"><img src="img/爱奇艺.jpg" alt=""><h4>中国领先的视频门户</h4><figcaption><span class="score">爱奇艺</span></figcaption></a><div class="type">爱奇艺</div></figure><figure><a href="/" target="_blank"><img src="img/youku.png" alt=""><h4>中国领先的视频网站</h4><figcaption><span class="score">优酷</span></figcaption></a><div class="type">优酷</div></figure><figure><a href="/" target="_blank"><img src="img/豆瓣.png" alt=""><h4>提供图书、电影、音乐唱片的推荐</h4><figcaption><span class="score">豆瓣</span></figcaption></a><div class="type">豆瓣</div></figure><figure><a href="/" target="_blank"><img src="img/hupu.png" alt=""><h4>最专业的篮球网站</h4><figcaption><span class="score">虎扑</span></figcaption></a><div class="type">虎扑</div></figure><figure><a href="/" target="_blank"><img src="img/简书.png" alt=""><h4>最简洁的博客</h4><figcaption><span class="score">简书</span></figcaption></a><div class="type">简书</div></figure><figure><a href="/" target="_blank"><img src="img/淘宝.jpg" alt=""><h4>只有想不到，没有买不到</h4><figcaption><span class="score">淘宝</span></figcaption></a><div class="type">淘宝</div></figure><figure><a href="/" target="_blank"><img src="img/去哪儿.png" alt=""><h4>特价机票,超值酒店,省心省钱,聪明你的旅行!</h4><figcaption><span class="score">去哪儿</span></figcaption></a><div class="type">去哪儿</div></figure></div></div><div class="clearfix"></div><footer id="footer"><div class="top">客户端 | 触屏版 | 电脑版</div><div class="bottom">Copyright © 于山阿金| 虎扑JR| 翻唱哥</div></footer></body></html>
如果觉得《将PC端固定布局页面改成移动端流体布局。》对你有帮助，请点赞、收藏，并留下你的观点哦！
![[06]项目实战-移动端流体布局](https://sm.tqys.net/uploadfile/pic/553.jpg)
