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>

查看全文

相关阅读:
vue element-ui 饿了么布局，gutter间距碰上bordr 会失效
 Linux 常用命令
 阿里云部署，ubuntu, 连接服务器 |更新源| 安装node |安装mysql
常用 shell 命令 chmod | root
node 进程管理 child_process [spawn,exec] | 珠峰培训node正式课网络爬虫
 html2canvas用法的总结(转载)
使用nvm-windows安装nodejs遇到的问题（转载）
Can’t call setState (or forceUpdate) on an unmounted component 警告处理方法
 webpack 搭建问题汇总
 webpack执行命令参数

原文地址：https://www.cnblogs.com/guozh/p/10163339.html

响应式和自适应的区别 鲁中O

响应式和自适应的区别鲁中O