CSS响应式布局

力软低代码开发平台

于 2019-12-18 13:29:13 发布

阅读量178

点赞数

分类专栏：日志文章标签： css

本文链接：https://blog.csdn.net/weixin_42831704/article/details/103596104

版权

日志专栏收录该内容

116 篇文章 0 订阅

订阅专栏

基本的概念：一个网站可以兼容多个终端，针对不同终端设置不同的样式。
优点：

面对不同分辨率设备灵活性强；
能够快捷解决多设备显示适用问题；

缺点：

兼容各种设备，效率低下；
代码累赘；

实现响应式布局的三种方式

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时，加载这里的样式

}

</style>
方式二：（外部式css样式）

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="./font_icons/fonts.css">
<link rel="stylesheet" type="text/css" href="./css/common.css">
<link rel="stylesheet" media="screen and (max-width:768px)" href="./css/phone.css" />
<link rel="stylesheet" media="screen and (min-width:768px)" href="./css/tablet.css" />
<link rel="stylesheet" media="screen and (min-width:1024px)" href="./css/desktop.css" />
<link rel="stylesheet" media="screen and (min-width:1200px)" href="./css/desktop_hd.css" />
</head>
注：书写顺序一定不能差

力软低代码开发平台

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS响应式布局

基本的概念：一个网站可以兼容多个终端，针对不同终端设置不同的样式。优点：面对不同分辨率设备灵活性强；能够快捷解决多设备显示适用问题；缺点：兼容各种设备，效率低下；代码累赘；实现响应式布局的三种方式 1. CSS3-Media Query（最简单的方式，但是无法满足很多需求） 2. 借助原生Javascript（成本高，不推荐使用） 3. 第三方...
复制链接

扫一扫