聊聊PC端页面适配

2024-09-03 13:08
文章标签 页面 聊聊 pc 适配

本文主要是介绍聊聊PC端页面适配,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

聊聊PC端页面适配

 目也pc端有适配的需求:目前我们pc项目的设计稿尺寸是宽度1920,高度最小是1080。

适配目标:

1.在不同分辨率的电脑上,网页可以正常显示

2.放大或者缩小屏幕,网页可以正常显示

对于宽度的适配

 

对于宽度适配:

首先设置html,body{width:100%;overflow-x:hidden;}

然后我们可以把页面分解为背景层(一般宽度都会大于1200px)和内容层(一般宽度都会小于1200px),对于背景层,我们一般都要求完全铺开,主要有以下几种情况:

1.背景色为纯色:我们可以直接.box{background:#fff;width:100%;}则可以铺满

2.背景设置为背景图片:

我们有情况用.box{background: #fff url(images/01.png) no-repeat center center;width:100%;height:100px;}

有的情况需要用:.box{background: url(images/01.png) repeat left center;width:100%;height:100px;}

对于内容层我们保证我们的内容都封装在盒子内,然后margin:0 auto;保持居中显示,盒子里面的内容,我们再另外调整

 对于高度的适配

 一般情况下,页面都比较高,我们通过给每个模块设置具体的高度值来做页面,然后页面会出现导航条,我们可以拉动导航条来浏览,但是有的页面的需求是主体内容直接在不同的浏览器上都能完整显示,不通过导航条来浏览

如何做?

1、百分比的应用

百分比的应用在于主视角的定位和缩放,百分比的取值以原设计稿的尺寸为标准。什么意思呢?举个栗子,一个元素在原设计稿里,量出来距离顶部是 200px,如果写死可能是top:200px 或者margin-top:200px,现在要转成百分比,那么这个值可能就是23.3%。这个值怎么算?如果设计稿是 1080,200/1080=18.51%这样计算出来百分比的值。

但是,有个地方要注意,流体布局下,百分比的值是根据父层计算的;absolute布局的元素是根据最近的relative父层计算的;fixed布局的元素是根据window的可视区域计算的。

所以,如果要达到适配的效果,不只是当前元素需要用百分比值,其参考计算的元素也是要动态变化的。

另 外还有一个就是图片缩放的问题,pc很多主视角都是切图的,但是pc不能直接用background-size(虽然强大的filter兼容可以使低版本 ie支持,但是之前说过用filter都要特别小心,特别是涉及到js交互操作的,很多坑)。在pc我们可以直接通过img标签来插入图片,通过设置 img宽度为100%,高度auto,然后让它根据父层来等比缩放来实现(img标签实现缩放引起的另一个问题是该图片不能用雪碧图了,但pc的主视角不 是很多,影响不大)。

2、js监测

需要js主要有两个原因:

上面说了,百分比是要有父层做参照物的,那么如果父层都用百分比,那就是最终是根据window来参照的,因为pc绝大部分都是宽屏设备,而且他们的比例是不一致的,我们来计算下(190是减去浏览器工具条、window桌面条、我们页面通用顶条):

设计稿:1920/(1080-190) = 2.16

14寸普通笔记本:1366/(768-190) = 2.36

所以,我们不能宽高都100%按照屏幕尺寸来计算。另外考虑到主要是高度对pc页面的主视角影响比较大,我们需要借助js来计算确定一个最小高度临界值(当然这个可以用css的min-height来实现);

另外一个是,通过js判断最小高度临界值,再加上这个最小临界值的class,为了处理那些特殊的布局或者百分比无法完全解决适配的元素,比如字体的相关布局

这篇关于聊聊PC端页面适配的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1133044

相关文章

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

编程应该用 Mac 还是 PC ?

『有人的地方,就有江湖』—徐克。笑傲江湖。     序     一个竞争的市场,就会有对立的产生,这世界存在著很多不同的领域,领域好比是个江湖的缩影,因此就有许多门派的纷争,例如说浏览器领域有著最大宗的IE派,门派成长速度飞快,武功版号跳的跟台湾物价指数一样快的Chrome门,不断被模仿,一直被超越的Opera派;韧性极强,一直对抗几大势力的Firefox派等等,程序语言也有自己的领域

PC与android平板通过浏览器监控Verybot的视频

下面这个视频是PC与android平板通过浏览器监控Verybot的视频:           http://v.youku.com/v_show/id_XNjYzNzYyMTIw.html

Weex入门教程之3,使用 Vue 开发 Weex 页面

环境安装 在这里简略地介绍下,详细看官方教程 Node.js 环境 Node.js官网 通常,安装了 Node.js 环境,npm 包管理工具也随之安装了。因此,直接使用 npm 来安装 weex-toolkit。 npm 是一个 JavaScript 包管理工具,它可以让开发者轻松共享和重用代码。Weex 很多依赖来自社区,同样,Weex 也将很多工具发布到社区方便开发者使用。

ViewPager+fragment实现切换页面(一)

如今的很多应用中都是下面有一排按钮,点击可以切换页面,滑动也可以切换页面。下面就来简单的实现这个功能。 思路 首先肯定是会用到viewpager这个控件,为了能够向下兼容,最好用v4包下的viewpager,Activity要继承FragmentActivity 其次用一个集合来存储所有的fragment页面在设置viewpager的适配器时,把存储fragment页面的list集合传入ada

【鸿蒙HarmonyOS NEXT】页面之间相互传递参数

【鸿蒙HarmonyOS NEXT】页面之间相互传递参数 一、环境说明二、页面之间相互传参 一、环境说明 DevEco Studio 版本: API版本:以12为主 二、页面之间相互传参 说明: 页面间的导航可以通过页面路由router模块来实现。页面路由模块根据页面url找到目标页面,从而实现跳转。通过页面路由模块,可以使用不同的url访问不同的页面,包括跳转到U

鸿蒙开发5.0【Picker的受限权限适配方案】

Picker由系统独立进程实现,应用可以通过拉起Picker组件,用户在Picker上选择对应的资源(如图片、文档等),应用可以获取Picker返回的结果。 类型受限权限使用的picker音频ohos.permission.READ_AUDIO,ohos.permission.WRITE_AUDIOAudioViewPicker文件ohos.permission.READ_DOCUMENT,oh