将PC端固定布局页面改成移动端流体布局。

之前写的两个页面都是PC端固定布局，现在进行对页面改进成移动端流体布局进行尝试。

一、首先先了解几个规范：在标签中加入

窗口设定：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: XXX px ) and (max-width: XXX px )的方式的方式来控制当用户使用不同大小的媒体来浏览页面是，属性样式的显示方式。也可以在其中加入某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 {      < ----在类名为“clearfix”的元素内最后面加入内容；
    content: ".";    < ----内容为“.”就是一个英文的句号而已。也可以不写。
    display: block;  < ----加入的这个元素转换为块级元素。
    clear: both;    < ----清除左右两边浮动。
    visibility: hidden;     < ----可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间，只是看不到而已；
    height: 0;    < ----高度为0；
    font-size:0;   < ----字体大小为0；
}

7.限定行文字显示设定

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;

最后完成结果如下。

    
    
    
    





        

            
导航
            

        
启动QQ
        
打开微信
        
新浪微博
            
        


    


    

        
        

        

        搜索
    
    
    



    

        
常用板块
        
资讯，娱乐，购物等
    
    

    

        
        
        
中国浏览量最大的中文门户网站
        

            腾讯网
        
        
腾讯
    
    

        
        
        
为全球用户24小时提供全面及时的中文资讯
        

            新浪网
        
        
新浪
    
    

        
        
        
最有态度的网站
        

            网易
        
        
网易
    
    

        
        
        
带给你最新的资讯
        

            虎嗅
        
        
虎嗅
    
    

        
        
        
知无不言
        

            知乎
        
        
知乎
    
    

        
        
        
为创业者提供最好的产品和服务
        

            36氪
        
        
36kr
    
    

        
        
        
产品经理、产品爱好者学习交流平台
        

            人人都是产品经理
        
        
人人都是产品经理
    
    

        
        
        
中国领先的视频门户
        

            爱奇艺
        
        
爱奇艺
    
    

        
        
        
中国领先的视频网站
        

            优酷
        
        
优酷
    
    

        
        
        
提供图书、电影、音乐唱片的推荐
        

            豆瓣
        
        
豆瓣
    
    

        
        
        
最专业的篮球网站
        

            虎扑
        
        
虎扑
    
    

        
        
        
最简洁的博客
        

            简书
        
        
简书
    
    

        
            
            
只有想不到，没有买不到
            

                淘宝
            
            
淘宝
    
    

        
            
            
特价机票,超值酒店,省心省钱,聪明你的旅行!
            

                去哪儿
            
            
去哪儿
    

    


    

        客户端 | 触屏版 | 电脑版
    
    
Copyright © 于山阿金| 虎扑JR| 翻唱哥