知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    響應式布局簡明示例

    作者:佳明媽 來源:懶人建站 2014-01-03 人氣:
    響應式布局簡明示例,響應式布局最好同時也是自適應布局,然后再配合css3媒體查詢,來達到完美的響應式布局。
    響應式布局簡明示例,響應式布局最好同時也是自適應布局,然后再配合css3媒體查詢,來達到完美的響應式布局
    css3的媒體查詢ie9一下是不支持的,這太遺憾了,不過幸運的是有大神已經為前端屌絲們寫好了用于IE9以下的媒體查詢腳本文件,引用方式如下:
    <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->

    css3媒體查詢語法
    /*@media screen and (min-width:1440px) and (max-width:1600px){}*/
    @media screen and (min-width:1440px){ /*大于等于1440*/
        /*這里是特定的樣式表*/
        body,input,textarea,select,small,a{font-size:14px;}
    }
    @media screen and (max-width:1024px){    
          /*懶人建站*/
    }
    @media screen and (max-width:768px){
          /*不大于768px的設備尺寸中 響應式布局的特定樣式*/
    }
    @media screen and (max-width:360px){
        
    }
    @media screen and (max-width:320px){
        
    }
    看了這幾個 寫法是不是感覺響應式布局不過如此,哈哈,其實就是這么簡單。

    別急,在仔細想想好像還少點啥,比如在移動端、手機上打開這個網頁的話,如果做響應式布局,還要在head區域加上如下代碼:
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />    
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="format-detection" content="telephone=yes"/>
    <meta name="msapplication-tap-highlight" content="no" />
    如果不是很明白,就直接粘貼過去使用就可以了。
    width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no 大概意思是,網頁寬度采用設備寬度,縮放比例為1,不允許用戶縮放操作,
    以上的頭部聲明是手機端頁面的標配。

    懶人建站認為響應式布局最好是先做最簡單版本,然后再擴展成復雜版本,這樣做的好處的在手機上訪問的時候可以只載入簡單版本的js和css文件,而在PC端寬屏上將會載入復雜的龐大的js和css文件。

    如果你真的要做響應式布局響應到手機端的話,對于字體字號的選擇推薦使用rem做為單位,
    設置如下:
    html{font-size: 62.5%;}
    使用的時候,如果你要設置一個16px的字號,用rem字號表示就是 1.6rem,font-size:2em; == font-size:20px;

    懶人建站整理編輯,更多響應式布局相關文章敬請關注懶人的最新文章。
    ↓ 查看全文

    響應式布局簡明示例由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    響應式布局簡明示例-最新評論

    老子是皇帝在线客服 辽宁35选7开奖软件 开元棋牌app gg516棋牌游戏中心 沈阳沐足的地方 网络棋牌赌博没人管吗 开元棋牌游戏是真的吗 财神国际棋牌下载 11选5任2神号期期必中 中国福利彩票老快3开奖结果 排3走势图专业版(带连线) 手机版吉祥棋牌? 体彩云南11选五开奖走势图 白城棋牌游戏 琼崖海南麻将稳赢技巧 广西快乐10分投注技巧 秒速牛牛开奖网站