不同屏幕尺寸的电脑和移动端页面适配方法

2024-01-26 20:14:25

通常我们在pc上看到的页面都是比较大的，在pc上访问页面是正常显示的，默认是不会被缩放的，除非是手动进行了缩放，页面才会被放大比例或者是缩小比例显示。但是在移动端是不一样的，如果将一个pc端的页面放到手机端进行访问，那么可能出现页面挤到一起、布局错乱或者出现横向滚动条的情况，影响用户的浏览体验，也让整个网页看上去很不美观。

那么，如何让你的网站或网页在不同屏幕尺寸的电脑和移动端上都能很好地显示呢？下面就给大家介绍一下不同屏幕尺寸的电脑和移动端页面适配方法。

viewport移动端适配

viewport是移动设备屏幕的逻辑视窗，它定义了网页在设备上的显示区域。通过viewport我们可以控制网页在设备上的缩放比例，从而实现移动端适配。

在HTML文档的head标签中添加以下代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这行代码的意思是：

width=device-width：将视口的宽度设置为设备的宽度。
initial-scale=1.0：将视口的初始缩放比例设置为1.0，也就是100%。
maximum-scale=1.0：将视口的最大缩放比例设置为1.0，也就是100%。
user-scalable=no：禁止用户手动缩放页面。

响应式布局

响应式布局是指网站或网页的布局能够随着屏幕尺寸的变化而自动调整。响应式布局可以使用媒体查询来实现。

媒体查询是一种CSS技术，它允许你根据不同的屏幕尺寸为网页设置不同的样式。例如，你可以使用以下媒体查询来设置移动端设备的样式：

@media (max-width: 768px) {
  /* 移动端设备的样式 */
}

媒体查询

媒体查询是CSS中的一个特性，它允许开发者根据不同的屏幕尺寸、设备类型和方向等条件，为网页设置不同的样式。我们可以使用媒体查询来实现响应式布局，让网页在不同的屏幕尺寸上都能正常显示。

/* 屏幕宽度小于768px时，将字体大小设置为16px */
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

/* 屏幕宽度大于768px时，将字体大小设置为18px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}