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

最新推荐文章于 2023-05-04 23:00:01 发布
最新推荐文章于 2023-05-04 23:00:01 发布
阅读量2k 收藏 7
点赞数 1
分类专栏： html 文章标签： pc和web布局区别
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/binlety/article/details/81431326
版权

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

binlety
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PC、移动端自适应等比缩放布局方案
11-16
PC、移动端自适应等比缩放布局方案
PC端页面布局和溢出属性
最新发布
2301_80864686的博客
11-04 104
（1）描述：通栏布局指的是, 当布局的时候, 无论浏览器比例如何缩小放大, 有一个色块区域, 颜色是从左侧通向右侧的, 这一块的布局被称之为通栏布局。1、定义：布局过程中父元素有自己的宽度高度， 父元素里面的文本或者是子元素的大小比较大，已经超出了父元素的区域，这种超出的效果被称之为溢出。（1）描述：当浏览器显示比例缩小或者是放大的时候，布局中心区域始终位于水平居中位置显示， 这种情况被称之为版心布局。（2）注意：版心一般有具体的宽度，并且位于浏览器水平居中位置的时候，需要添加margin:0 auto;
PC端常用的布局方法
subsistent的博客
03-26 559
左右定宽度，分布向两边浮动，中间如果没设置溢出处理默认宽度是100%，设置后就会截取两边的宽度从而实现中间自适应。通过flex相关的属性进行适配性的调整布局。1、利用float+overflow实现。4、float+margin实现三列布局。5、定位absolute实现中间自适应。3、Table表格布局。6、Grid网格布局。
16.移动端和PC端布局区别
测试进阶之路
11-07 1295
一，移动端页面开发 了解移动端页面与PC端开发的区别，学习移动端页面的开发流程。 二，移动端与PC端页面布局区别 视口 视口是移动设备上用来显示网页的区域，一般比移动设备可视区域大，宽度可能是980px 或者 1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端视口的大小，这样会让页面不容易观看，可...
知道为什么HTML页面在电脑上和手机上的布局不同吗？这篇文章带你走进Element UI的简单适配
m0_57249797的博客
10-18 1561
引言 之前的文章介绍过bootstrap的响应式布局，帮助我们在手机上适配电脑上的页面， 当然媒体查询也是一个很不错的适配方法 今天带你们了解Element UI的适配方法 Element的栅格系统 bootstrap的栅格系统为12栏，而Element UI划分的更细一点，它拥有24栏 那么怎么划分栏呢，方法非常简单， <el-row></el-row>标签定义一行，也就是24栏在这一行中进行划分， <el-col></el-col>定义换分出来的份数，我们
【移动端网页布局】flex 弹性布局 ① ( 传统布局与 flex 弹性布局 | flex 弹性布局简单使用 | flex 弹性布局下直接为行内元素设置宽高 | flex 弹性布局设置权重 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
05-04 1141
一、传统布局与 flex 弹性布局 二、flex 弹性布局简单使用 1、代码示例 - flex 弹性布局下可以直接为行内元素设置宽高 2、代码示例 - flex 弹性布局设置权重
前端：移动端和PC端的区别
totosj的博客
06-24 1569
在阿里的几次面试中，总是被问到移动端和PC端有什么区别，当时回答的时候主要是回答了在兼容性、网速、适配、页面布局等方面的不同，但是还是很不系统，所以这里做一个总结。第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差...
19 01 05 移动端页面开发
bangchela8451的博客
01-06 99
视口 视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小...
web页面常用布局（pc端布局和移动端布局）
热门推荐
风清竹叶青
10-17 1万+
web页面常用布局（pc端布局和移动端布局） 什么是web布局呢？ 布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，布局的方式分为两种： 1、table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。 2、...
关于移动端布局和pc端写法
xgb的博客
05-25 9029
一：移动端准备工作&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;&lt;meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"&gt;&lt;!-
HTML5 常见面试题之PC端和移动端区别介绍
12-13
1、PC端和移动端有什么区别 从我个人角度来说，我觉得PC端的定位就是用户视觉浏览路线，可以显示较多的内容，而移动互联网终端的定位就是便携，体现的是“Anyone Anytime Anywhere”的理念，它不是替代PC的设备，...
jQuery实现瀑布流布局详解（PC和移动端）
10-23
非常全面的介绍了在PC和移动端上jQuery实现瀑布流布局的详细过程，对瀑布流布局感兴趣的小伙伴们可以参考一下
浅谈pc和移动端的响应式的使用
12-14
1.响应式跟自适应有什么区别? 有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的. 自适应是最早出现的，后面才有了响应式。响应式布局等于流动网格布局，而自适应布局等于使用固定分割点...
pc移动端页面的布局rem
05-28
这里运用到的知识点有 布局 定位 浮动 流失布局 也又是你要思考这个网页交给你你会如何去做呢？上面的项目是 基础在日后的工作中算是最简单的了.因为学校是带你去入这个门，剩下的要靠自觉去钻研。
浏览器的回流和重绘详解，怎么避免
binlety
08-04 6701
重绘：当元素的外观或外观可见性（visibility）发生变化时会触发重绘 回流：render树中的部分或全部因为元素的规模尺寸、布局、隐藏等改变，需要重新计算render树。 避免回流和重绘方法      减少回流、重绘其实就是需要减少对render tree的操作，并减少对一些style信息的请求，尽量利用好浏览器的优化策略    （1） 避免操作DOM，创建一个documentFragme...
什么是html5？有什么特点？
binlety
08-04 4218
HTML5是HTML（超文本标记语言）的第五次更新的产品，这是一种解释型的语言，文件的扩展名的后缀为.htm或者.html的形式。 摆脱对平台的依赖 HTML5可以让你摆脱对平台的依赖，用户打开浏览器，直接就可以访问你的应用，而不需要经过各种Store的审核。 实时更新 实时更新，通常平台的审核都需要七个工作日左右的时间，如果你发布之后发现问题怎么办?Web方式就不存在这种问题。 离线使用 ...
移动端开发常见的兼容问题
binlety
08-08 1808
禁止复制、选中文本   Element {-webkit-user-select:none;   -moz-user-select:none;   -khtml-user-select:none;    user-select:none; } 解决移动设备可选中页面文本(视产品需要而定)   长时间按住页面出现闪退 element {   -webkit-touch-callout:n...
手机端页面设置缓存
binlety
08-07 1401
设置缓存 &lt;meta http-equiv="Cache-Control"content="no-cache"/&gt; 手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。...
写前端代码，pc端和移动端有哪些区别
09-20
### 回答1： PC端和移动端前端代码的主要区别有以下几点： 1. 屏幕大小不同：PC端通常具有更大的屏幕，因此需要使用不同的布局和设计来适应不同的屏幕大小。 2. 触摸操作：移动端通常支持触摸操作，因此需要使用不同的交互方式来适应触摸操作。 3. 网络连接：移动端通常在移动环境中使用，因此需要考虑网络连接的速度和稳定性。 4. 浏览器兼容性：移动端的浏览器兼容性比PC端的要低，因此需要考虑不同的浏览器对前端代码的支持情况。 5. 资源限制：移动端的设备通常具有更低的处理能力和内存容量，因此需要考虑如何优化前端代码以适应这些限制。 总体而言，开发PC端和移动端前端代码都需要考虑不同的因素，因此需要为不同的设备制定不同的解决方案。 ### 回答2： 在写前端代码时，PC端和移动端之间存在一些显著的区别。 首先，布局方面是有区别的。由于PC端拥有更大的屏幕空间，我们可以采用更为复杂的布局结构，如多列布局、大尺寸的图片等。而移动端由于屏幕尺寸有限，需要采用简洁的布局，更注重页面的垂直滚动。 其次，用户交互方式也存在差异。在PC端，我们使用鼠标来与页面进行交互，可以使用hover、click等事件来实现各种效果。而在移动端，用户主要通过触摸屏幕进行交互，因此需要通过触摸事件来实现相应的功能。 另外，移动端还需要考虑适配各种不同尺寸的设备。在PC端，我们可以设计固定宽度的页面，而在移动端，页面需要进行适配，以适应不同尺寸的屏幕。这需要使用响应式布局或者媒体查询等技术来实现。 此外，性能方面也是需要考虑的因素。移动设备的处理能力、网络状况等都相对于PC端有限，因此在移动端开发时，需要更加注重优化代码，减少不必要的请求和资源加载，以提高页面的加载速度和性能表现。 综上所述，PC端和移动端在布局、用户交互、设备适配和性能优化等方面都存在明显的区别，前端开发人员需要针对不同平台进行相应的优化和适配。 ### 回答3： 在写前端代码时，PC端和移动端有以下几个区别。 1. 布局和设计：PC端屏幕相对较大，通常使用多列布局，而移动端屏幕较小，通常使用单列布局。此外，移动端需要考虑手势操作和触摸屏幕，因此需要更大的可点击区域和适应手指操作的设计。 2. 响应式设计：由于PC端和移动端屏幕尺寸不同，需要采取响应式设计，使页面能够自适应不同屏幕大小。通过使用媒体查询和弹性布局来实现元素的动态调整和优化。 3. 页面加载速度：由于移动端网络环境相对不稳定，更需要注意页面的加载速度。因此，需要优化代码、压缩图片和资源，并尽量避免使用大型库或框架。 4. 功能和交互：由于移动端设备的特性，一些功能和交互方式可能与PC端不同。例如，移动设备有加速度计和地理定位功能，可以实现摇一摇或基于地理位置的交互。 5. 浏览器兼容性：不同的浏览器和操作系统在PC端和移动端的兼容性也会有所不同，因此需要做好兼容性测试和兼容性适配，确保在不同设备上都能正常显示和运行。 总的来说，PC端和移动端在设计、布局、响应式、加载速度、功能交互和兼容性等方面有一些区别，前端开发人员需要根据具体情况进行相应的调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值