CSS响应式布局
2021-05-11 03:26
YPE html>
标签：注意 scala char 基本 手动 image 三方 scree 大小
基本的概念：一个网站可以兼容多个终端，针对不同终端设置不同的样式。
优点：
- 面对不同分辨率设备灵活性强；
- 能够快捷解决多设备显示适用问题；
缺点：
- 兼容各种设备，效率低下；
- 代码累赘；
实现响应式布局的三种方式
1. CSS3-Media Query（最简单的方式，但是无法满足很多需求）
2. 借助原生Javascript（成本高，不推荐使用）
3. 第三方开源框架（比如bootstrap,可以很好的支持浏览器的响应式布局）
设置meta标签
在完成非响应式布局后，head中添加如下代码。设置meta标签来告诉浏览器，让视口宽度等于设备宽度，而且需要禁止用户缩放行为。
这里视口的设置需要注意的是，视口就是可见的屏幕尺寸；设置视口时只设置宽度，而不在乎高度，这是因为高度由内容自动撑开。
具体含义如下：
- Width: 控制viewport的大小。如device-width为设备的宽度。
- initial-scale: 初始缩放比例，页面第一次加载时的缩放比例。
- maximum-scale 允许用户缩放到的最大比例，范围从0到10.0
- minimum-scale: 允许用户缩放到的最小比例，范围从0到10.0
- user-scalable： 用户是否可以手动缩放，值可以是:
媒体查询应当怎么写呢？
CSS样式分为：内联式css样式、嵌入式css样式、外部式css样式
方式一：（嵌入式css样式——这种是不推荐的，这样会使得html页面代码太繁琐）：
//当屏幕宽度小于768px时，加载这里的样式
}
@media screen and (min-width:368px){
//当屏幕宽度大于368px时，加载这里的样式
}
@media screen and (min-width:300px) and (max-width:600px){
//当屏幕宽度大于300px且小于600px时，加载这里的样式
}
方式二：（外部式css样式）
注：书写顺序一定不能差
CSS响应式布局
标签：注意 scala char 基本 手动 image 三方 scree 大小
原文地址：https://www.cnblogs.com/zhuochong/p/12058488.html