zoukankan      html  css  js  c++  java
  • 响应式和自适应的区别 鲁中O

    响应式网站:https://www.microsoft.com/zh-cn/    页面缩放,框架变动

    自适应网站:http://m.ctrip.com/html5/                 页面缩放,整体等比例缩放(框架不变)

    响应式

    一、响应式布局框架的优点、缺点、原理

    优点:   1.面对不同分辨率设备灵活性强       2.能够快捷解决多设备显示适应问题

    缺点:   不能完全兼容所有浏览器,代码累赘,加载时间加长。不明白响应式布局该怎么去做,以及它的开发原理是什么的看看下面的响应式布局的HTML代码?

    原理:   简单点说响应式布局它是通过CSS中Media Query(媒介查询)@media功能,来判断我们的终端设备宽度在多少像素内,然后就执行与之对应的CSS样式。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="gb2312">
    <title>响应式布局</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            *{margin:0;padding:0;text-decoration:none;list-style:none;
             font-size:14px;font-family:"微软雅黑";text-align:center;
             color:#fff;}
             .clear{clear:both;}
             #header,#content,#footer{margin:0 auto;margin-top:10px;}  
             #header,#footer{margin-top:10px;height:100px;}
             #header,#footer,.left,.right,.center{background:#333;}
            /*通用样式*/
             /*手机*/
            @media screen and (max-600px){
               #header,#content,#footer{width:400px;}
               .right,.center{margin-top:10px;}
               .left,.right{height:100px;}
               .center{height:200px;}
            }
    
            /*平板*/
            @media screen and (min-600px) and (max-960px){
            #header,#content,#footer{width:600px;}
            .right{display:none;}
            .left,.center{height:400px;float:left;}
            .left{width:160px;margin-right:10px;}
            .center{width:430px;}
            }
    
            /*PC*/
            @media screen and (min-960px){
            #header,#content,#footer{width:960px;}
            .left,.center,.right{height:400px;float:left;}
            .left{width:200px;margin-right:10px;}
            .center{width:540px;margin-right:10px;}
            .right{width:200px;} 
            }
        </style>
    </head>
    <body>
        <!--header start-->
               <div id="header">header</div>
        <!--end header-->
    
        <!--content start-->
            <div id="content">
        
                <div class="left">left</div>
            
                <div class="center">center</div>
            
                <div class="right">right</div>
                <div class="clear"></div>
            </div>
        <!--end content-->
    
        <!--footer-->
            <div id="footer">footer</div>
        <!--end footer-->
    </body>
    </html>
  • 相关阅读:
    English,The Da Vinci Code, Chapter 23
    python,meatobject
    English,The Da Vinci Code, Chapter 22
    English,The Da Vinci Code, Chapter 21
    English,The Da Vinci Code, Chapter 20
    English,The Da Vinci Code, Chapter 19
    python,xml,ELement Tree
    English,The Da Vinci Code, Chapter 18
    English,The Da Vinci Code, Chapter 17
    English,The Da Vinci Code, Chapter 16
  • 原文地址:https://www.cnblogs.com/guozh/p/10163339.html
Copyright © 2011-2022 走看看