html+css+bootstrap网页布局学习Day6

响应式布局：可以为不同终端的用户提供更加舒适的界面和更加友好的用户体验，而且随着目前大屏幕移动设备的普及，越来越多网站采用这个技术

响应式设计一定是最佳选择吗？

如果预算充足且形式需要，做一个真正的“手机版”网站是首选。因为响应式设计没有专门设计一个手机版网站的功能多，比如获取当前用户的GPS定位，只是用响应式设计会很难实现。但如果只是根据视口额大小为用户提供匹配的视觉效果还是优先选择响应式设计。

优点：

面对不用分辨率设备灵活性强。
能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率略慢
代码累赘，会出现隐藏无用元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

media Query的基本语法

@media mediatype and|not|only(media feature){css-code;}

媒体类型有

all 所有设备

print 用于打印机和打印预览

screen 用于电脑屏幕，平板电脑，智能手机

speech 应用于屏幕阅读器等发声设备

加载媒体查询的最佳方式：

使用多个css文件会增加http请求的数量，是页面加载变慢。所以我们能的媒体查询样式的文件蒋亮放在一个里，以注释加以区分。

阻止移动浏览器自动调整页面大小

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   #father{
    width: 100%;
    min-width: 960px;
    /* height: 100px; */
    border: 3px #0000FF solid;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
   }
   #father>div{
    height: 60px;
    /* width: 35%; */
    border: #008000 1px solid;
   }
   #father>div:first-child{
    flex-grow: 1;
   }
   #father>div:nth-child(2){
    flex-grow: 4;
   }
   #father>div:nth-child(3){
    flex-grow: 2;
   }
  </style>
 </head>
 <body>
  <div id="father">
   <div>1</div>
   <div>2</div>
   <div>3</div>
  </div>
 </body>
</html>

   /* pc */
   @media  screen and (min-width:960px){
    .top{
     min-width: 960px;
    }
    nav{
     min-width: 960px;     
    }
    #content{
     min-width: 960px;
    }
    .footer{
     min-width: 960px;
    }
    .footer_bottom{
     min-width: 960px;
    }
   }
                        /*ipad*/
   @media  screen and (max-width:960px) and (min-width:700px){
    .top_center, .top_right{
     display: none;     
    }
    .ipad{
     display: block;
    }
    nav{
     min-width: 700px;     
    }
    nav>ul{
     flex-wrap: wrap;
    }
    #content{
     min-width: 700px;
    }
    
    .content{
     min-width: 700px;
     flex-wrap: wrap;
    }
    #content>.content>section{
     width: 40%;
     margin-bottom: 40px;
     margin-left: 30px;
    }
    .footer{
     min-width: 700px;
    }
    .footer_bottom{
     min-width: 700px;
    }
   }

                        /*手机*/
   @media  screen and (max-width:700px){
    .top_center, .top_right{
     display: none;     
    }
    .ipad{
     display: block;
    }
    nav{
     min-width:200px;
     height: 165px;
    }
    nav>ul{
     flex-wrap: wrap;
    }
    nav>ul>li{
     width: 32%;
     text-align: center;
    }
    nav>ul>li:first-child{
     padding: 10px 0;
    }
    .top{
     min-width: 200px;
    }
    #content{
     min-width: 200px;
    }
    .content{
     min-width: 200px;
     flex-wrap: wrap;
    }
    #content>.content>section{
     width: 100%;
     margin-bottom: 40px;
    }
    .footer{
     min-width: 200px;
     flex-direction: column;
    }
    .footer_bottom{
     min-width: 200px;
    }
    .footer_center{
     display: none;
    }
    .footer_left{
     width: 100%;
     border: 1px red solid;
    }
    .footer_right{
     border: 1px red solid;
     /* text-align: center; */
     
    }
   }

html+css+bootstrap网页布局学习Day6

浏览过的版块