自适应布局和响应式布局以及媒体查询

小段爱前端

已于 2023-09-26 09:03:35 修改

阅读量1.3k

点赞数

分类专栏：移动端布局文章标签： css html 前端

于 2022-11-09 23:23:18 首次发布

本文链接：https://blog.csdn.net/weixin_52954097/article/details/127778931

版权

移动端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

布局

1 篇文章 0 订阅

订阅专栏

自适应布局：

根据百分比布局，当拉到一定程度的时候，宽度的值将不再变化。

这是因为前端在开发的时候进行了设置，防止在页面拉伸到一定程度的时候图片失真，即图片显示不清晰，超过了图片最大展示尺寸

不建议这种方式，我们后期会根据拉伸屏幕的尺寸，展示不同质量的图片，比如拉伸到一定程度展示ui给的2倍图或者3倍图。

自适应

为了解决在不同大小的设备上呈现相同的网页

如何实现

自适应主要是指的宽度的自适应百分比的流式布局【宽度按照百分比进行布局】

js代码如下：

// 自适应布局

function setRem(){

var uiWidth=375;

var clientWidth=document.documentElement.clientWidth||document.body.clientWidth;

// 设置最大最小宽度

clientWidth=clientWidth>625?625:clientWidth;

clientWidth=clientWidth<300?300:clientWidth;

// console.log(uiWidth,clientWidth);

//var html=document.getElementsByTagName('html')[0];

// var html=document.documentElement('html')[0];//和上边的获取方式一样

var html=document.querySelector('html');

html.style.fontSize=(clientWidth/uiWidth)*10+'px';

}

// 防抖

var timer=null;

window.οnresize=function(){

clearTimeout(timer);

timer=setTimeout(setRem,300);

}

// 当页面加载的时候也要调用一下setRem,目的是默认把html 根节点的字体大小设置为10px

window.οnlοad=setRem;

// setRem();//也是表示你页面加载的时候调用setRem

//防抖和节流二选一即可

//节流

// var flg = true;

// window.onresize = function () {

// if (flg) {

// flg = false;

// setTimeout(function () {

// flg = true;

// setRem();

// }, 300)

// }

响应式布局：

Ethan Marcotte [伊桑马卡特] 在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

大白话：

一个网站能够兼容多个终端

是同一页面在不同屏幕尺寸下有不同的布局，一套页面，可以在不同的设备上正常显示

当页面足够小的时候，会隐藏掉一部分内容，重点显示主要的内容

通过设定屏幕不同时刻的样式进行设置

<title>响应式布局</title>
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="style-1.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 480px) and (max-width: 760px)" href="style-2.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 760px) and (max-width: 995px)" href="style-3.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 995px) and (max-width: 1100px)" href="style-4.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1100px)" href="style-5.css" />

如上述代码：

分别设置

屏幕最大480px时，展示一套css样式

屏幕最小480px,最大760px时，展示一套css样式

屏幕最小7690px,最大995px时，展示一套css样式

屏幕最小1100pxs时，展示一套css样式

媒体查询：

兼容性

移动终端上一般对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询的兼容问题
IE8及以下版本浏览器不支持媒体查询

媒体类型：

常用的是以上三种，w3c规定了10余中媒体类型，最常用的就是上述三种

all (所有的设备)
print (打印设备)
screen (屏幕，电脑屏幕,平板电脑,智能手机)

媒体的特性：

用来描述设备的特点,比如宽度,高度

可以将媒体特性看成:

“媒体类型（判断条件）+ CSS（符合条件的样式规则）”

媒体特性语法：

例子：最大500px 下背景yellow -->

</style>

补充：

通过媒体查询，解决屏幕获取不到高清图片

刚才判断属性的时候，我们使用了and关键词，and表示多个条件同时满足

除了and，还有其他的关键词

and：表示多个条件同时满足

@media screen and （max-width：1200px）{样式代码…}

only：指定某种特定的媒体类型，可以用来排除不支持媒体查询的

表示：只有在屏幕最大宽度是500px的屏幕下，会执行style.css样式

only.css:

div{
width: 100%;
height: 300px;
background-color: yellow;
}

only.html:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/only.css" media="only screen and (max-width:500px)">
<script src=""></script>
</head>

</body>

</html>

not：排除某种指定的媒体类型，即排除符合表达式的设表示取反

@media not print and （max-width：1200px）{样式代码…}

媒体查询引入方式：

@media方式：

@media 媒体类型 {
选择器{ /*样式代码写在这里…*/}
}

link方法：

媒体查询冲突

如图，在800,600等临界值处，会有冲突

修改为：

响应式布局优缺点

优点:

不同分辨率设备灵活性强,[比自适应强，自适应只是宽度的自适应]
多终端视觉和操作体验好
响应式web设计中的大部分技术都可以用在WebApp开发中[可以用在移动端设备，也可以用在pc端]

缺点

兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长

响应式和自适应的区别

响应式的概念覆盖了自适应，但是包括的东西更多。响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局
自适应还是暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，也会感觉在小屏幕上查看，内容过于拥挤
响应式解决了自适应布局的问题。它可以自动识别屏幕宽度、并做出相应调整，布局和展示的内容可能会有所变动

rem响应式布局

如果移动端页面只在移动端访问，那么使用rem可以实现响应式布局

实现原理：

动态改变 html的font-size值的大小，来完成rem实现响应式布局

rem实现响应式原理：

rem 的值都是根据html的fontsize进行计算的

统一缩放元素大小，只要修改html的fontsize

使用rem开发响应式布局步骤1:

从Ui设计师拿到设计稿，一般尺寸都是以iphone 6的尺寸为准 750*1334（分辨率）
在样式中给html设定一个fontsize的值，我们一般设置一个方便后续计算的值，例如10px、100px等，我们使用100px
写样式
- 完全按照设计稿的尺寸来写样式，设计稿上的长度、height、margin、padding、字体的值是多少，我们就写多少，这样可以100%还原设计稿
- 注意：需要把得到的像素值/100px,转换为rem单位

使用rem开发响应式布局步骤2:

根据当前屏幕的宽度和设计稿的宽度来重新计算html的FontSize的大小
根据当前屏幕宽度和设计稿的宽度的比例，动态计算当前宽度下的fontsize值大小，如果fontsize值改变了，之前设定的所有的rem单位的值自动会跟着改变

function setRem(){

var uiWidth=375;

// 获取屏幕的宽度

var clientWidth=document.documentElement.clientWidth||document.body.clientWidth;

// 通过js动态改变html根节点字体大小

//var html_= document.getElementsByTagName('html')[0];

var html=document.querySelector('html');

html.style.fontSize=(clientWidth/uiWidth)*10+'px';

}

// window.onresize 浏览器被重置大小执行事件
window.onresize = setRem;

// 当页面加载的时候也要调用一下setRem,目的是默认把html 根节点的字体大小设置为10px

window.οnlοad=setRem;

</script>

判断是pc还是移动浏览器

通过JavaScript判断终端类型

//把请求头信息转为小写
//user agent是指用户代理,使服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。
sUserAgent = navigator.userAgent.toLowerCase();

sUserAgent.match('ipad') == "ipad";
sUserAgent.match('ucweb') == "ucweb";
...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>判断是PC还是移动端浏览器</title>
</head>
<body>

</body>
</html>

var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";

if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
// 移动端浏览器
document.write("phone");
//移动端浏览器
window.location.href = "https://m.jd.com/";
// if (curURL.indexOf("jd.com") != -1) {
// window.location.href = "https://m.jd.com/";
// }
} else {
// PC端浏览器
document.write("pc");
// if (curURL.indexOf("jd.com") != -1) {
// window.location.href = "https://www.jd.com/";
// }
}
}