关于我们 仿站价格 交易方式

仿站网一站式全套服务,用最优惠的价格做出最好的效果,为您打造真正 盈利的有用的网站。
仿站咨询
 您当前位置:仿站网 >> 资讯中心 >> 仿站设计 >> 浏览文章

响应式 Web 设计

时间:2019/3/12 9:54:12   作者:本站原创    字体:

响应式 Web 设计

设置 Viewport

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


·                     width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。

·                     height:和 width 相对应,指定高度。

·                     initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。

·                     maximum-scale:允许用户缩放到的最大比例。

·                     minimum-scale:允许用户缩放到的最小比例。

·                     user-scalable:用户是否可以手动缩放。

响应式 Web 设计 - 网格视图

创建响应式网格视图

首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box

* {
    box-sizing: border-box;
}


12 列的网格系统可以更好的控制响应式网页。

首先我们可以计算每列的百分比: 100% / 12 = 8.33%

在每列中指定 class class="col-" 用于定义每列有几个 span

CSS:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.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%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

所有的列向左浮动,间距(padding) 15px

CSS:

[class*="col-"] {
    
float: left;
    
padding: 15px;
    
border: 1px solid red;
}

每一行使用 <div> 包裹。所有列数加起来应为 12

<div class="row">
  
<div class="col-3">...</div>
  
<div class="col-9">...</div>
</div>

列中行为左浮动,并添加清除浮动:

CSS:

.row:after {
    
content: "";
    
clear: both;
    
display: block;
}

响应式 Web 设计图片

 

图片使用 width 属性

如果 width 属性设置为 100%,图片会根据上下范围实现响应式功能:

实例

img {
    
width: 100%;
    
height: auto;
}

使用 max-width 属性

如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小:

实例

img {
    
max-width: 100%;
    
height: auto;
}

背景图片

背景图片可以响应调整大小或缩放。

以下是三个不同的方法:

1. 如果 background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域。图片保持其比例不变:

div {
    
width: 100%;
    
height: 400px;
    
background-image: url('img_flowers.jpg');
    
background-repeat: no-repeat;
    
background-size: contain;
    
border: 1px solid red;
}

2. 如果 background-size 属性设置为 "100% 100%" ,背景图片将延展覆盖整个区域:

div {
    
width: 100%;
    
height: 400px;
    
background-image: url('img_flowers.jpg');
    
background-size: 100% 100%;
    
border: 1px solid red;
}

3. 如果 background-size 属性设置为 "cover",则会把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此 背景图像的某些部分无法显示在背景定位区域中。

div {
    
width: 100%;
    
height: 400px;
    
background-image: url('img_flowers.jpg');
    
background-size: cover;
    
border: 1px solid red;
}

 

不同设备显示不同图片

大尺寸图片可以显示在大屏幕上,但在小屏幕上确不能很好显示。我们没有必要在小屏幕上去加载大图片,这样很影响加载速度。所以我们可以使用媒体查询,根据不同的设备显示不同的图片。

/* For width smaller than 400px: */
body {
    
background-image: url('img_smallflower.jpg'); 
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body 
        
background-image: url('img_flowers.jpg'); 
    }
}

你可以使用媒体查询的 min-device-width 替代 min-width 属性,它将检测的是设备宽度而不是浏览器宽度。浏览器大小重置时,图片大小不会改变。

实例

/* 设备小于 400px: */
body {
    
background-image: url('img_smallflower.jpg'); 
}

/* 设备大于 400px (也等于): */
@media only screen and (min-device-width: 400px) {
    body 
        
background-image: url('img_flowers.jpg'); 
    }
}

 

响应式 Web 设计 - 视频(Video)




使用 width 属性

如果 width 属性设置为 100%,视频播放器会根据屏幕大小自动调整比例:

实例

video {
    
width: 100%;
    
height: auto;
}

使用 max-width 属性

如果 max-width 属性设置为 100%, 视频播放器会根据屏幕自动调整比例,但不会超过其原始大小:

实例

video {
    
max-width: 100%;
    
height: auto;
}

响应式 Web 设计媒体查询

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

实例

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

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

当屏幕 (浏览器窗口) 小于 768px, 每一列的宽度是 100%:

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.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%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}

 

为移动端优先设计

/* 为移动端设计: */
[class*="col-"] {
    
width: 100%;
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .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%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

方向:横屏/竖屏

结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait)的布局。

语法:

orientation:portrait | landscape


·                     portrait指定输出设备中的页面可见区域高度大于或等于宽度

·                     landscape portrait值情况外,都是landscape

实例

如果是横屏背景将是浅蓝色:

@media only screen and (orientation: landscape) {
    body {
        
background-color: lightblue;
    }
}