Bootstrap(响应式网页)概述

最新推荐文章于 2022-10-21 15:37:46 发布

z_k2580

最新推荐文章于 2022-10-21 15:37:46 发布

阅读量420

点赞数

分类专栏：笔记文章标签： bootstrap WEB前端

本文链接：https://blog.csdn.net/z_k2580/article/details/82782420

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

响应式网页的构成：
1.流式布局（Fluid：流式、流动式、液态）

2.可伸缩的图片和文字

3.CSS3 Media Query技术，根据浏览设备的宽和高调用不同的CSS

测试响应式网页：

1.使用真实物理设备测试——测试效果最好但最麻烦

2.使用第三方模拟器软件测试

3.使用浏览器提供的设备模拟器测试——最简单但有时测试效果与真实物理设备有所不同

编写响应式网页

1.允许网页宽度自动调整

在HEAD标签中，声明viewport元标签

<head>
      <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable="no">
</head>

viewport:视口，由Apple在IOS中最先引入该元标签，手机中显示网页内容的虚拟窗口的大小，一般要远大于手机屏幕大小， HTML中可以指定此视口的大小

可指定如下属性：
width：视口的高度，可以取之为数值，或device-width

height：视口的高度，一般不指定

initial-scale：初始时的缩放倍率

minimum-scale:允许的最小缩放倍率

maximum-scale：允许的最大缩放倍率

user-scalable：是否允许用户手动缩放，可取值 1 / 0 / yes / no

不使用绝对宽度

所有元素的宽不能指定固定值，必须使用相对的宽度值，如

width：60%; /width：auto;

相对大小的字体

字体大小不能使用绝对大小(px)，必须使用相对大小（em）,如：

body{
  font:normal 100% Helvetica,Arial,sans-serif;
}


h1{
     font-size:1.5em;
}

small{
   font-size:0.875em;
}

流式布局

布局用的各个区块的位置都是浮动的，不是固定不变的

.main{
   float:right;
   width:70%;
}

.let-bar{
  float:left;
  width:25%;
}

图片的自适应

除了布局和文本，“自适应网页设计”还必须实现图片的自动缩放

img{
  max-width:100%;
}

或者，根据客户端屏幕大小的不同，加载不同尺寸的图片

选择加载CSS

根据浏览器的不同，加载不同的CSS文件

<link rel="stylesheet" href="tinyScreen.css" media="screen and (max-device-wiodth:400px)">
<link rel="stylesheet" href="smallScreen.css" media="screen and (min-width:400px) and (max-device-width:600px)">

CSS的@media规则

同一个CSS片段中，也可以根据不同的屏幕宽度，有选择的执行部分CSS规则

@media screen and(max-device-width:400px){
  .column{
         float:none;
         width:auto;
  }
  #sidebar{
         display:none;
  }
}

z_k2580

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap(响应式网页)概述

响应式网页的构成： 1.流式布局（Fluid：流式、流动式、液态） 2.可伸缩的图片和文字 3.CSS3 Media Query技术，根据浏览设备的宽和高调用不同的CSS测试响应式网页： 1.使用真实物理设备测试——测试效果最好但最麻烦 2.使用第三方模拟器软件测试 3.使用浏...
复制链接

扫一扫