pc移动端适配（pc 移动端适配）

大家好！今天让创意岭的小编来大家介绍下关于pc移动端适配的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

开始之前先推荐一个非常厉害的Ai人工智能工具，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等

只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端

官网：https://ai.de1919.com。

创意岭作为行业内优秀的企业，服务客户遍布全球各地，如需了解SEO相关业务请拨打电话175-8598-2043，或添加微信：1454722008

本文目录:

• 1、如何让一个网站同时适配PC和移动设备

• 2、移动端Web页面适配方案（整理版）

• 3、什么是移动适配

• 4、移动端全屏滚动页面（fullPage）的适配问题

一、如何让一个网站同时适配PC和移动设备

要让一个网站同时适配pc和移动端，那你得会写前端，html,css，js用得好就行，一个个屏幕调好，如果不会的话，前端里面有学的，花时间学就可以了

二、移动端Web页面适配方案（整理版）

@(概述)[基本概念|百分比|rem|vw/vh|响应式设计]

移动端web页面的开发，由于手机 屏幕尺寸 、 分辨率 不同，或者需要考虑 横竖屏 问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。

早期网页设计采用 静态布局 ，通过 <meta> 标签中的 applicable-device 应用设备标识识别移动设备，即 <meta name = 'applicable-device' content = 'mobile'> ，在 <meta> 标签中的 viewport 标签中设置 width ，通过 js 动态修改标签的 initial-scale 使得页面等比缩放，刚好占满整个屏幕。一些文章中有提到静态布局中页面各个元素采用 px 为单位，这种方案实现简单，不存在兼容性问题，但用户体验很不友好。

后面出现 流式布局 ，使用百分比 % 定义宽度，高度使用 px 固定，根据可视区域大小实时进行尺寸调整，通常使用 max-width/min-width 控制尺寸范围过大或者过小。这种方案实现比较简单，但在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。

顺应不同页面字体大小展现问题，出现了 弹性布局 。这种布局方案下，包裹文字的元素的尺寸采用 em/rem 为单位，页面主要划分区域的尺寸依据情况使用 px 、百分数或者 em/rem 。如一些高校的网站 jlu ，页面的主要划分区域使用 px 和百分比，包裹文字的元素和文字采用 em 。

上面的这几种方案下，页面元素的大小按照屏幕分辨率进行适配调整，但是整体布局不变，对于 响应式web设计 ，网页布局会随着访问它的视口及设备的不同呈现不同的样式，在实现上可能会以上多种方案的结合，同时搭配 媒体查询 技术使用，使得一个页面在多个终端 (PC, mobile, pad) 呈现满意效果，如 mashable 。

[TOC]

像素，是屏幕上显示数据的最基本的点，表示相对大小。不同分辨率下相同长度的 px 元素显示会不一样，是因为像素点的个数相同情况下，不同分辨率下每个像素点对应的像素宽度不同。比如同样是 14px 大小的字，在 1366×768 显示屏下会显示的小，在 1024×768 显示屏下会相对大。也称为 物理像素（设备像素 ），是分辨率的尺寸单位。

印刷行业常用单位，能够使用测量设备测得的长度，等于 1/72 英寸。

在不同屏幕上， css 像素呈现的物理尺寸一致，但 css 像素对应的物理像素具数不同。标准的显示密度下， 1 个 css 像素对应一个物理像素，缩放时， 1 个 css 像素对应的物理像素会减增。是一种 设备独立像素(device independent pixels: DIPs)

像素密度，每英寸所拥有的像素数。值越高，显示画面细节越丰富。计算公式为： ，其中 和 是分辨率的宽高， 是屏幕尺寸。

打印设备每英寸印刷出来的点有多少个，值越高，图片越细腻。

设备物理像素和设备独立像素比 ，即 是指在理想布局宽度，使用多少个物理像素来渲染一个css像素。js中通过 window.devicePixelRatio 获取，css中通过 -webkit-device-pixel-ratio , -webkit-min-device-pixel-ratio , -webkit-max-device-pixel-ratio 进行媒体查询。

<meta> 标签中定义了一些元数据信息，通过设置 <meta name = "viewport"> ，提供有关 视口初始大小 的信息，供 移动设备 使用。属性值为

移动端涉及 布局视口 （Layout Viewport）、 视觉视口 （Visual ViewPort）和 理想视口 （Ideal ViewPort）。

与移动端web页面适配有关的手机屏幕特性包括

硬件所支持的，屏幕每行的像素 * 每列的像素点数，单位是 px 。

设备独立的，软件可以达到的，个人理解是使得软件/页面在不同屏幕上显示出来的效果一致。

像素分辨率 ÷ 逻辑分辨率等于 倍率 ，如 @3x 表示分辨率的 3 倍。一个已知物理像素大小的元素，如果在普通屏中其设备像素等于 css 像素，但在一些高清屏中，如 Retina 显示屏，一个css像素对应 2 或 3 个设备像素，这时显示出来的元素会变小。为了让元素如期待显示，需要传入 原始设计稿尺寸 × 倍率 的设计稿，根据 DPR 的定义，这样加载后能够达到同样的效果。

手机屏幕对角线长度换算成英寸的大小

贴上 源码 分析

视口 是浏览器中用于呈现网页的区域，移动端的视口通常指的是 布局视口

使用 css 预处理器把设计稿尺寸转换为 vw 单位，包括 文本 ， 布局高宽 ， 间距 等，使得这些元素能够随视口大小自适应调整。以 1080px 设计稿为基准，转化的计算表示为

响应式设计 使得一个网站同时适配 多种设备 和 多个屏幕 ，让网站的布局和功能随用户的使用环境（屏幕大小、输出方式、设备/浏览器能力而变化），使其视觉合理，交互方式符合习惯。如使得内容区块可伸缩与自由排布，边距适应页面尺寸，图片适应比例变化，能够自动隐藏/部分显示内容，能自动折叠导航和菜单。

三、什么是移动适配

移动适配是指使不同尺寸的手机设备页面“相对性的达到合理的展示（自适应）”或者“保持统一效果的等比缩放。手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑安卓/IOS的各种尺寸设备上的兼容，针对移动端设备的页面，设计与前端实现更好地适配不同屏幕宽度的移动设备。

扩展资料：

完美的移动适配不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；显示的文字、图片等其他元素大小合适，无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。

适配不同屏幕宽度以及不同dpr，通过动态设置viewport(scale=1/dpr) + 根元素fontSize + rem, 辅助使用vw/vh等来达到适合的显示。

若无需适配可显示1px线条，也可以不动态设置scale，只使用动态设置根元素fontSize + rem + 理想视口。

四、移动端全屏滚动页面（fullPage）的适配问题

之前把这种一屏一屏滚动的页面，叫过锁屏，叫过滑动，就是没有找到一个标准的叫法。后来查了一些资料，也确实没有标准的定义。只是有个插件叫fullPage，比较符合，然后中文就是全屏滚动了。也讨教了另一个前端同伴，他也说就叫fullPage吧。然后就这么愉快的决定给它叫做全屏滚动了！

如今，经常能看见这种网站，这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次！感觉开始的时候pc较多，后来发展到移动端。简单的说，全屏滚动就是整个页面从上到下由多个部分组成，每个部分都正好占满一个屏幕。用户可以滚动鼠标滚轮（移动端为滑动），每次滚动（滑动）都会从一个部分滚动到另一个部分。因为要设置每个部分的内容都是占满一个屏幕的，所以一般都是添加一些简单的内容。移动端更是必须的，移动端的设备杂乱，屏幕大小尺寸不同，分辨率不同，那么要想在每个设备上都呈现完美的状态，简直是不可能的。

我们正在做的全屏滚动页面呈现的内容就是比较多的，是按照iphone6的尺寸做的。由于布局样式用了rem和flexible适配，内容会随着屏幕而放大或者缩小。在iphone5上效果还是可以的，而iphone4就完全不行，有一部分内容被遮掉了。经过媒体查询iphone4手机也可以了。而面临着更严峻的问题是还有好多五花八门的尺寸。 安卓和ios常用尺寸 ，接下来选取了这个链接给提供的安卓和ios常用的前五种尺寸做适配。这样除了iphone4、5、6之外还要调试十种尺寸，感觉真是路漫漫其修远兮。然后就有了一个这样的思考，这十种尺寸的比例是不是一样呢，如果比例一样，是不是可以按比例进行媒体查询呢，如果可以就不用调试十种了。

十种尺寸里面有七种尺寸的比例都是1:1.7多的，最后找到了按比例查询的css即显示区域宽高比（aspect-ratio）此值只支持正整数，因此下面我把1:1.7各乘以10写为10:17。也是支持min和max的。另外还有设备宽高比（device-aspect-ratio）。

全屏滚动页面的适配问题还需要根据页面的需求情况去做相应的适配，并没有说写上一行样式，所有适配就都解决了的方法。感觉说的和废话一样呢？主要是想介绍按比例的媒体查询样式的，其他还有好多以前没用到过的查询方法可以参考 https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

以上就是关于pc移动端适配相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。

推荐阅读：

pc浏览器排行榜（pc浏览器排行榜2022）

抖店pc端工作台（抖店pc端工作台手机怎么登录）

pc处理器排行榜（pc处理器排行榜）

个体户抖音能开蓝v吗（个体户抖音能开蓝v吗安全吗）

郑州短视频运营公司哪家好点