Bootstrap_1.响应式网页、Bootstrap、全局CSS样式

最新推荐文章于 2024-05-30 15:01:09 发布

Jyan_29

最新推荐文章于 2024-05-30 15:01:09 发布

阅读量1.5k

点赞数

分类专栏： Web前端基础知识 Bootstrap 文章标签： bootstrap 响应式网页全局CSS

本文链接：https://blog.csdn.net/qq_33392141/article/details/84935844

版权

1 响应式网页

1.1 概述

智能的根据用户行为或使用设备进行相应布局。

响应式网页定义
Responsive Web Design：响应式网页设计，专为改进移动互联网浏览体验提出的概念。
基本理念：集中创建页面的图片和排版大小，智能地根据用户行为和使用的设备环境进行相应布局(自动更改布局、图片、文字效果)——一个页面兼容各种终端
响应式网页构成
1）不能固定宽度，必须是流式网格布局(Fluid:流式、流动式、液态)；
2）可伸缩的图片和文字，随容器大小改变；
3）CSS3 Media Query能根据浏览设备的宽和高调用不同CSS

响应式布局网页问题：代码复杂度极大增加，只适用于内容不太多的页面(企业官网、门户网站)

1.2 测试响应式网页

浏览器设备模拟器
简单方便；测试效果有限
第三方工具
无需添置太多真实设备，测试方便；但测试效果有限，需进一步验证；(phonegap，Android ADT，IOS Xcode，www.browserstack.com)
真实设备.
测试效果真实可靠，但测试任务量较大

1.3 编写响应式网页

允许网页宽度自动调整
在head标签中声明viewport元标签
```
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0 user-scalable=no">
</head>
```
viewport：元标签(视口)，IOS最先引入，手机中显示网页内容的虚拟窗口的大小一般远大于手机屏幕，HTML可以指定视口大小
width：视口的宽度，取值为数值或device-width；
initial-scale：初始缩放倍率
maximum-scale：允许缩放的最大倍率
minimum-scale：允许缩放的最小倍率
user-scalable：是否允许用户手动缩放；1/0/yes/no
height：视口高度，一般不指定
IOS专用属性：minimal-ui:ios ui设置在ios设备上隐藏导航栏和地址栏
一般设置视口宽度为设备宽度，不允许缩放
不使用绝对宽度
所有元素的宽不能指定固定值，必须使用相对宽度：width:60%或auto;
相对大小的字体
使用font-size:rem/em
流式布局
使用流式布局+弹性布局(float+flex)：布局各个区块位置都是浮动的;搭配媒体查询技术(CSS Media Query)：响应式网页必备条件，可以自动根据当前浏览器设备的不同选择执行部分CSS样式
图片自适应
实现图片的自动缩放：img{max-width:100%;}或者根据客户端屏幕大小加载不同尺寸的图片

选择加载CSS
不推荐根据浏览器不同加载不同CSS文件：

<link rel="stylesheet" href="tinyScreen.css" media="screen and (max-device-width: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 (min-widht:768px) and (max-diwth:991px) {
   	选择器样式
   }
```

盒子模型计算方式box-sizing常使用border

最低0.47元/天解锁文章

Jyan_29

关注

0
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap_1.响应式网页、Bootstrap、全局CSS样式

响应式网页、Bootstrap、全局CSS样式1 响应式网页1.1 概述1.2 测试响应式网页1.3 编写响应式网页2 Bootstrap2.1 Bootstrap2.1.1 Bootstrap定义2.1.2 目录说明2.1.2 模板2.1.3 相关技术2.3 bootstrap.css2.3.1 CSS Reset2.3.2 box-sizing3 全局CSS样式3.1 全局CSS样式3.2 栅...
复制链接

扫一扫