pc端移动端布局有什么区别

最新推荐文章于 2024-03-28 16:54:47 发布
原创 最新推荐文章于 2024-03-28 16:54:47 发布 · 2.1k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#pc和web布局区别

本文对比了PC端与移动端开发的显著区别，包括兼容性、布局方式、事件触发机制、JavaScript框架选择及交互方式的不同。

1.兼容问题
PC端在开发过程中需要考虑不同浏览器的兼容问题
移动端则需要考虑的是不同手机操作系统的手机分辨率的略微差异化
2.布局问题
PC端最常用的布局一般是固定的宽度
移动端因为有很多网页是可以横屏看也可以竖屏看，所以一般使用自适应布    局或响应式布局
3.事件触发
pc端没有触摸的各种事件，移动端有
移动端没有鼠标移入移出事件，但是pc端有
4.Js
移动端和pc端适用的js框架也是不一样
5.交互不同
Pc端的交互是鼠标，键盘的交互
移动端变成了触摸，手势的交互

精选资源
PC、移动端自适应等比缩放布局方案
11-16
本文将详细介绍一种适用于PC端大屏监控及移动端布局的解决方案——REM与VW布局相结合的方式。 #### 布局历史概述 - **静态布局**：早期网页设计中普遍采用的方法，使用固定单位如`px`来指定元素的大小与位置，但在...
PC端和移动端自适应问题的快速解决方法
09-24
总结来说，解决PC端和移动端自适应问题需要对不同分辨率进行考量，并通过媒体查询、相对单位、弹性布局等技术手段来实现网页的响应式设计。对于老版本浏览器的兼容处理，需要借助JavaScript来辅助实现布局的调整。...
16.移动端和PC端布局区别
测试进阶之路
11-07 1611
一，移动端页面开发 了解移动端页面与PC端开发的区别，学习移动端页面的开发流程。 二，移动端与PC端页面布局区别 视口 视口是移动设备上用来显示网页的区域，一般比移动设备可视区域大，宽度可能是980px 或者 1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端视口的大小，这样会让页面不容易观看，可...
移动端布局和pc端布局的区别
2302_78955875的博客
02-27 1020
移动设备上的视口一般比移动设备可视区域大，为了避免横向滚动条的出现，移动端会将视口缩放到移动设备可视区域的大小，可以通过设置meta标签的viewport属性来实现。：PC端最常用的布局一般是固定的宽度，而移动端因为有很多网页是可以横屏看也可以竖屏看，所以一般使用自适应布局或响应式布局。：PC端在开发过程中需要考虑不同浏览器的兼容问题，而移动端则需要考虑不同手机操作系统的手机分辨率的略微差异化。：PC端有鼠标移入移出事件，而移动端没有鼠标移入移出事件，但是有触摸的各种事件。
移动端布局和pc端写法
qq_38698753的博客
06-15 1310
一：移动端准备工作<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"><!-
关于移动端布局和pc端写法
唐唐唐行的博客
05-30 286
原文：关于移动端布局和pc端写法_xuguibin8的博客-优快云博客_移动端写法 一：移动端准备工作 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"> <!-- 设置在苹果手机上
前端之移动端布局--移动端的特点-百分比布局-flex布局--less--vw/vh--响应式布局
faith_girl的博客
11-22 899
文章目录移动端布局一、移动端的特点二倍图二、百分比布局（古老的布局方式）三、flex布局（重点！）1.简介justify-content 主轴对齐方式align-items 侧轴对齐方式![在这里插入图片描述](https://img-blog.csdnimg.cn/baa0aa5b6e3b49c0ac01a2f6c89f7458.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAZmF
JS实现点击拉拽轮播图pc端移动端适配
10-18
在本文中，我们将探讨如何使用JavaScript（JS）来实现一个点击和拉拽的轮播图，使其同时适应PC端和移动端。轮播图是网页设计中常见的一种元素，用于展示多张图片或内容，通常带有自动播放、左右切换等功能。在移动...
基于vue项目下PC端和移动端实现的自适应.zip
10-21
总结来说，本项目"基于vue项目下PC端和移动端实现的自适应.zip"涵盖了Vue.js响应式开发的多个层面，从布局到路由，从状态管理到第三方库的使用，都是实现跨平台自适应设计的重要组成部分。通过学习和实践，开发者...
HTML5 常见面试题之PC端和移动端区别介绍
09-27
总结来说，PC端和移动端无论是在界面布局、使用习惯、网络速度还是技术实现方面，都存在着显著的区别。移动端的特点是便携性，强调的是随时随地都能使用，而PC端则能提供更丰富的内容和更复杂的功能。随着移动互联网...
移动端布局
赵圆圆
12-11 603
rem 布局 (function(){ var html = document.documentElement; var width = html.getBoundingClientRect().width; html.style.fontSize = width/18+'px'; //1rem = 60px; 以iPhone6s 为准 })();...
移动端有哪些常见布局方式？
weixin_30509393的博客
04-12 278
一、固定布局 固定布局是第一次做移动端时最好的选择方式,思路沿用PC端,上手比较快。在标签里把 viewport 加好,然后设想整个网页的宽度为 320px 即可。 其他地方根据 PC 端来布局。 缺点:大屏手机显示网页比较宽,固定布局宽度参照永远是 320px,导致左右两 边会有空白。 二、流动布局 流动布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同，流动布局就是使用百分比来代...
前端开发响应式布局和移动端布局有哪些特点和区别？
a158559681的博客
04-19 969
同学们在进行前端开发的时候经常会运用到响应式布局，在进行移动端页面开发的时候还会使用到移动端布局的知识，那么你知道他们都有哪些优缺点和相同之处吗？下面小千就来给大家列举一下。 响应式布局 响应式布局是实现不同屏幕分辨率的终端上浏览网页展示的不同方式。 简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 优点：就是面对不同分辨率设备灵活性较强，能够快捷解决多设备显示适应问题，主要用到的核心技术是媒体查询。 下面是同一个响应式项目展示在不同分辨率的设备下，内容展示的布局变化 移动端布
谈一谈pc端布局方式
姑娘这鸡汤有毒-的波克
03-01 857
啊啊
移动端和PC端在布局和样式上有哪些主要差异？您是如何兼容这两种环境的？
肖肖肖丽珠的博客
03-28 854
移动端对手机网络的要求比较高，需要考虑弱网的情况。因为手机内存有限，如果网页运行时需要下载大量图片，并且需要执行一些耗时算法、动画，可能会比较占用内存和cpu，会导致动画卡顿、交互卡顿。移动端手机屏幕比较小。一般采用响应式布局。字体，宽高让它随屏幕的变化都变化。采用rem或者rpx，vw/vh的单位。移动端更加注重用户交互体验。没有那些悬停和双击，拖拽，右键菜单这样的事件。pc屏幕比较大，一般采用固定布局。移动端主要考虑不同手机的适配。pc的网络环境更加稳定。pc主要是鼠标操作。
PC/移动端布局方式
weixin_37391237的博客
03-31 763
.静态布局： 布局特点：宽高固定 2.自适应布局： 布局特点：不同分辨率下，页面元素位置变化，大小不变 实现方法:针对不同分辨率创建对应的样式表，使用 @media 媒体查询给不同尺寸的设备切换不同的样式 缺点：IE8及以下不支持媒体查询；只能兼容主流分辨率 3.流式布局（百分比布局）: 布局特点：不同的分辨率下显示相同的排版；高度固定，宽度自适应 实现方法:网页中主要区域的尺寸使用百分比； 缺点：大屏幕上元素被拉长，但是文字，高度还是固定大小，不协调 经典流式布局：左侧固定，右侧自适应；两侧固定，中间自
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
weixin_33968104的博客
06-20 1955
简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。 px和视口 媒体查询 百分比 自适应场景下的rem解决方案 通过vw/vh来实现自适应 一、px和视口 在静态网页中，我们经常用像...
页面布局（PC、移动）
m0_46132840的博客
05-25 1213
一、传统布局（普通流+浮动+定位） 特点： 1、兼容性好 2、布局繁琐 3、局限性，不能在移动端很好的布局 二、响应式布局 百分比单位 + 媒体查询实现屏幕变小修改样式去适配三个（pc端、pad端、移动端）。 优点： 布局可以灵活的适配三个设备，减少成本。 响应式布局是一个网站适配手机平板和电脑，可以只买一个服务器和一个域名。 缺点： 开发者布局麻烦，不同的终端隐藏了一些多余的代码，导致代码量很多，不利于页面优化。太复杂的布局css处理麻烦...
web页面常用布局（pc端布局和移动端布局）
热门推荐
风清竹叶青
10-17 1万+
web页面常用布局（pc端布局和移动端布局） 什么是web布局呢？ 布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，布局的方式分为两种： 1、table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。 2、...
pc端布局和移动端布局的区别
最新发布
03-03
### PC端与移动端网页布局的主要区别 #### 宽度固定 vs 自适应/响应式设计 PC端最常用的布局通常是基于固定的宽度，这使得开发者可以精确控制页面元素的位置和尺寸[^1]。然而，在移动设备上，由于屏幕方向可以从纵向切换到横向，因此通常采用自适应或响应式的布局方式来确保用户体验的一致性和灵活性。 #### 设计理念的不同 Web布局是指将文字、图像和其他多媒体组件按照设计师意图有序地安排在屏幕上。对于桌面浏览器而言，主要考虑的是如何在一个较大的画布内合理分配空间；而对于手机和平板电脑，则更注重内容的可读性以及交互操作的手势友好程度[^2]。 ### 移动端适应策略 为了使网站能够在不同类型的终端上良好显示并提供一致的功能体验，以下是几种常见的移动端优化方法： #### 使用媒体查询 + `rem` 单位 这种方法的核心在于依据目标设备的具体属性调整HTML文档流中的基础字体大小（即 `<html>` 标签下的 `font-size`），从而间接影响其他相对长度单位 (`em`, `rem`) 的实际表现效果。例如： ```css @media all and (min-width: 320px) { html { font-size: 32px; } } @media all and (min-width: 375px){ html{font-size: 37.5px;} } ``` #### 利用 `vw` 和 `vh` 视窗百分比单位 这些单位允许根据当前窗口的高度(`vh`) 或宽度(`vw`) 来定义样式规则，有助于创建更加灵活多变的设计方案[^4]。 #### JavaScript 动态计算根元素字号 通过编写简单的脚本逻辑动态设置 HTML 文档的基础字体大小，可以根据用户的偏好或者其他条件实时更新界面外观。 #### 预处理器配合视窗比例单位 借助像 SASS 这样的 CSS 扩展语言简化复杂的样式表管理流程，并结合 `vw` 等现代CSS特性实现高效的内容呈现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值