响应式网站

其他 2019-05-02 00:58:03 阅读次数: 0

我们的眼睛在看东西时会自然地遵循一定的模式。通常从左上开始，然后从左到右，再从上到下。

很多网页都是基于网格设计的，这说明网页是按列来布局的。

响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。

为什么是12列呢，因为12可以被2、3、4、6整除，能2、3、4、6等分。

创建网格视图

CSS.css
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
 box-sizing: border-box;

}

* {
 border: 1px solid red !important;

}


.row{
 width:100%;
 display: flex;
 flex-wrap: wrap;
 text-align: center;
}
.col-1{
 width:8.3%;
}
.col-2{
 width:16.6%;
}
.col-3{
 width:25%;
 padding: 0.5%;
}
.col-4{
 width:33.33%;
}
.col-5{
 width:41.66%;
}
.col-6{
 width:50%;
}
.col-7{
 width:58.33%;
}
.col-8{
 width:66.66%;
}
.col-9{
 width:75%;
 padding: 0.5%;
}
.col-10{
 width:83.33%;
}
.col-11{
 width:91.66%;
}
.col-12{
 width:100%;
}

Html.html
 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Title</title>
 <link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body>

<div class="row">
 <div class="col-6">6 Columns</div>
 <div class="col-6">6 Columns</div>
</div>

<div class="row">
 <div class="col-3">3 Columns</div>
 <div class="col-3">3 Columns</div>
 <div class="col-3">3 Columns</div>
 <div class="col-3">3 Columns</div>
</div>

 <div class="row">
 <div class="col-4">4 Columns</div>
 <div class="col-4">4 Columns</div>
 <div class="col-4">4 Columns</div>
 </div>

</body>
</html>



效果：



 

Viewport
 

viewport 是用户网页的可视区域。
 

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
 
 

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
 

     
 
  • width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
    •  

 

     
 
  • initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
    •  

 

 

如果不加initial-scale=1.0,有的浏览器会在切换到横屏模式时，仍就保持之前的页面宽度，而且他们还会使内容只是进行缩放，而无法自动调整布局
 

 
 

媒体查询
 

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
 

如果浏览器窗口小于 500px, 背景将变为浅蓝色：
 

@media only screen and (max-width: 500px) {
     body {
         background-color: lightblue;
     }
 }
 
 

添加断点
 

之前我们使用行和列来制作网页，它是响应式的，但在小屏幕上并不能友好的展示。
 

媒体查询可以帮我们解决这个问题。我们可以在设计稿的中间添加断点，不同的断点有不同的效果。
 
 

1.掉落列模型
 

 

html:
 

 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Title</title>
 <link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body>


 <div class="row">
 <div class="box-darkBlue"></div>
 <div class="box-blue"></div>
 <div class="box-green"></div>

 </div>

</body>
</html>


css：
 

 

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
 box-sizing: border-box;

}

html,body{
 margin: 0;
 padding: 0;

}

.row{
 display: flex;
 flex-wrap: wrap;
}


div{
 width: 100%;
 min-height: 150px;
}

.box-darkBlue{
 background-color: darkblue;
}


.box-blue{
 background-color: blue;
}

.box-green{
 background-color: green;
}


@media only screen and (min-width: 500px){
 .box-darkBlue{
 width: 25%;}
 .box-blue{
 width: 75%;}
}

@media only screen and (min-width: 850px){
 .box-darkBlue,.box-green{
 width: 25%;
 }
 .box-blue{
 width: 50%;
 }
}

 

 
 

2.大体流动模型
 


与掉落列模型非常相似，但更像网格系统。
html:
 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Title</title>
 <link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body>


 <div class="row">
 <div class="box-darkBlue"></div>
 <div class="box-blue"></div>
 <div class="box-green"></div>
 <div class="box-red"></div>
 <div class="box-orange"></div>
 </div>

</body>
</html>


css:
 

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
 box-sizing: border-box;

}

html,body{
 margin: 0;
 padding: 0;

}

.row{
 display: flex;
 flex-wrap: wrap;
}


div{
 width: 100%;
 min-height: 150px;
}

.box-darkBlue{
 background-color: darkblue;
}


.box-blue{
 background-color: blue;
}

.box-green{
 background-color: green;
}

.box-red{
 background-color:red;
}

.box-orange{
 background-color: orange;
}


@media only screen and (min-width: 500px) {
 .box-blue, .box-green {
 width: 50%;
 }
}
@media only screen and (min-width: 650px){
 .box-darkBlue,.box-blue{
 width: 50%;
 }
 .box-green,.box-red,.box-orange{
 width: 33.333333%;

 }
}


@media only screen and (min-width: 850px){
 .row{
 width: 800px;
 margin-left: auto;
 margin-right: auto;
 }
}


 

3.活动布局模型
 


活动布局应该是最灵活的响应式模型了，它的布局方式并不是单纯的重排到其他列的下列，我们可以利用css顺序属性。
 


html:
 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Title</title>
 <link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body>


 <div class="row">
 <div class="box-darkBlue"></div>

 <div class="row2">
 <div class="box-blue"></div>
 <div class="box-green"></div>
 </div>

 <div class="box-red"></div>
 </div>

</body>
</html>


css:
 

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
 box-sizing: border-box;

}

html,body{
 margin: 0;
 padding: 0;

}

.row{
 display: flex;
 flex-wrap: wrap;
}


div{
 width: 100%;
 min-height: 150px;
}

.box-darkBlue{
 background-color: darkblue;
}


.box-blue{
 background-color: blue;
}

.box-green{
 background-color: green;
}

.box-red{
 background-color:red;
}

.box-orange{
 background-color: orange;
}


@media only screen and (min-width: 500px) {
 .box-darkBlue{
 width: 50%;
 }
 .row2{
 width: 50%;
 }
}



@media only screen and (min-width: 850px){
 .box-red{
 width: 25%;
 order: -1;
 }
 .row2{
 width: 50%;
 }
 .box-darkBlue{
 width: 25%;
 order: 1;
 }
 
}


 

 
 

4.画布溢出模型
 


在画布溢出模型中，内容并不是竖直堆放的，而是将不常用的内容，比如导航栏或者应用菜单，放在屏幕以外，只有当屏幕足够大的时候，才显示出来。

html:
 
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Title</title>
 <link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body>


 <nav id="drawer" class="dark-blue">
 </nav>

 <main clss="light-blue">
 <a id="menu">
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 <path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"></path>
 </svg>
 </a>
 </main>

<script> /* * 单击菜单图标时打开抽屉. */
var menu = document.querySelector('#menu');
var main = document.querySelector('main');
var drawer = document.querySelector('#drawer');
menu.addEventListener('click', function(e) {
 drawer.classList.toggle('open');
 e.stopPropagation(); });
main.addEventListener('click', function() {
 drawer.classList.remove('open'); });
</script>

</body>
</html>


 

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
 box-sizing: border-box;

}

html,body,main{
 padding: 0;
 margin: 0;
 height: 100%;
 width: 100%;
}

nav,main{
 padding: 1em;
}



.dark-blue{
 background-color: darkblue;
}

main{
 background-color: lightblue;
}

a#menu svg{
 width: 40px;
 fill: #000;
}

nav{
 width: 300px;
 height: 100%;
 position: absolute;
 transform:translate(-300px.0);
 -webkit-transform: translate(-300px, 0);
 transition: transform 0.3s ease;
}

nav.open{
 transform: translate(0,0);
 -webkit-transform: translate(0, 0);
}


/* 如果有足够的空间(>600 px)，我们总是把抽屉打开。*/
@media (min-width: 600px) {

 /* 我们打开抽屉. */
 nav{
 position:relative;
 -webkit-transform: translate(0, 0);
 transform: translate(0, 0);
 }

 /* 我们在父服务器上使用 Flexbox. */
 body {
 display: -webkit-flex;
 display: flex;
 -webkit-flex-flow: row nowrap;
 flex-flow: row nowrap;
 }

 main {
 width: auto;
 /* flex-grow 主要内容填充所有可用空间。 */
 flex-grow: 1;
 }

 main > #menu:after {
 content: '如果宽度超过 600px，抽屉就会保持打开状态。';
 }



 

响应式图片
 

未改进
  body {
      margin: 0;
    }
    img {
      float: left;


改进：   
 body {
      margin: 0;
    }
    img {
      float: left;
      margin-right: 10px;
      width: calc((100% - 20px)/3);
 
   
}

img:last-of-type{
  margin-right: 0;
}




 

鲜为人知的CSS单位
 

当你设置行内元素height:100%时,你必须使body、框内元素的height为100%，多么麻烦。
你可以直接设置 100vh，1个vh代表着1%的视图高度。
同理，1vw是1%的视图宽度。

高度和宽度可以设置 vmin单位使视图区域最小化，vmax使视图区域最大化。


 

不同设备显示分辨率的图片
 

 
 <picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture> 

 


    

 


    


                    
                    
                    
                    
                    
                    
                    
                    
                    

                        
猜你喜欢

                        

                            
                            
                        

                    


                    
转载自www.cnblogs.com/neowu/p/10798558.html

                    

                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    

                    


                

            

            


                

                    

                        
                        
                        
                        
                    


                    

                        

                            

                                今日推荐
                            


                            

                        

                    

                    

                        

                            

                                LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
                            

                        

                        

                            

                                国产云输入法——仅华为无云端数据上传安全问题
                            

                        

                        

                            

                                开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
                            

                        

                        

                            

                                开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
                            

                        

                        

                            

                                开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
                            

                        

                        

                            

                                “百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
                            

                        

                        
                        
                    

                


                

                    

                        

                            

                                周排行
                            

                            

                        

                    

                    

                        

                            

                                Family Tree 题解
                            

                        

                        

                            

                                BZOJ 1093 最大半连通子图 SCC + DP
                            

                        

                        

                            

                                幂等处理
                            

                        

                        

                            

                                Spring----学习（2）----XML 配置Bean 自动装配
                            

                        

                        

                            

                                SQL Server 远程更新目标表数据
                            

                        

                        

                            

                                HIbernate3.6 环境搭建
                            

                        

                        

                            

                                特殊符号正则表达式
                            

                        

                        

                            

                                【Linux】第一章 进程的理解
                            

                        

                        

                            

                                843. n-皇后问题（dfs+输出各种情况）
                            

                        

                        

                            

                                空间数据库2
                            

                        

                    

                

                

                    

                        

                            

                                每日归档
                            

                            

                                更多
                            

                            

                        

                    

                    

                        

                            2024-04-26(39)
                        

                        

                            2024-04-25(22)
                        

                        

                            2024-04-24(36)
                        

                        

                            2024-04-23(26)
                        

                        

                            2024-04-22(39)
                        

                        

                            2024-04-21(0)
                        

                        

                            2024-04-20(6)
                        

                        

                            2024-04-19(5)
                        

                        

                            2024-04-18(0)
                        

                        

                            2024-04-17(5)
                        

                    

                


            


            
        

    






















    


        

            
代码天地 © 2018 codetd.com

            境外服务器
             
            最新电视剧2022