怎么让PC端的页面快速适配手机端

我在最近做了一个工期很赶的官网项目,是PC端的,客户指定要用bootstrap2.3.1jq1.9,在2020年的今天可以说很“原始”了,我甚至放弃了我原本用起来非常舒适的flex,全程用浮动和行内块在实现并排显示元素的。好不容易做了一些看起来还算精致的页面,突然客户居然提出个奇怪的问题——“你们的项目没有适配手机端

???看到这一行字的我,内心是懵逼加崩溃的。设计稿是1920像素的宽度,主体部分宽度为1200像素,这是妥妥的PC端设计图啊,当初说的也是PC端的官网,并不是手机端的APP,小程序,或者微信公众号。这里先说一下,bootstrap其实很乖的,如果只是一列的布局,比如中间放个文章、放个单列的数据列表,显示还是正常的。然而问题出在首页等一些页面上,把中间的1200px的宽度占得严丝合缝,每一个细节几乎都是像素级还原设计图,这样,精致有了,弹性没了,布局是脆脆的,掰一下,就面目全非……电脑的宽度容下1200px没有问题,但手机的屏幕很窄,一到手机上看,就悲剧了。

所以怎么办呢?并没有手机端的设计图,好在客户的要求也不是很难,只是要求在手机上看的时候是电脑版的缩小版,显示得齐齐整整的,不要乱成一团即可。下面两个图,左边的是我调整前的样子,右边的是我调整后的样子。

下面来谈一谈我的方法吧。

有一种是比较科学的办法,很可惜我事后才想起。那就是px换成rem。为了方便计算,我使用的方法是:在网页加载完毕后,把屏幕的宽度除以19.2的值作为HTML的font-size,也就是让1920宽度的屏幕下,1rem的大小为100像素,在更小屏幕下,rem的大小等比例缩小(设计稿的宽度是1920,如果把设计稿分成19.2份,那么每份宽度为100。把设计稿上的100像素写成1rem,那么10像素就是0.1rem,这样计算起来很容易,而且由于更窄的屏幕宽度也是除以19.2来确定rem的,所以可以适配不同屏幕的大小)

但我用的办法是另一种,我并没有把px改成rem。我是从视口(viewport)这里下的手。适配手机离不开视口的设置,一般来说,电脑屏幕宽度很大,网页显示在电脑宽度才是完整的,所以在手机上看的时候,把电脑宽度那样的一千多像素显示到300多像素的手机上,必然要缩小才可以显示完整,所以手机上看到的字是缩小的。一般对视口的使用是把视口的宽度设为设备屏幕的宽度,也可以用固定值

是的,我这里就是使用了固定值,因为我主体部分宽度是1200,所以视口大小如果等于手机屏幕宽度,那么只有300多,显然不够,效果肯定是惨不忍睹的。之前我做第一个手机端项目的时候曾经把别人做的同类项目代码拿一部分来用了,我当时用的单位是px,那个时候我还没学过rem,但是居然在不同屏幕的手机上效果都还可以,原因就出现在视口上——对viewport的设置我是拷过来的,并没有改,而这里视口的宽度默认值是320——也就是说,我写的px的大小都是按照iPhone5屏幕宽度来的,在更大宽度的屏幕上,显示出来的样子被整个等比例放大了,字变大了,图变大了,在更大宽度的手机上看起来毫无违和感。

所以这次的项目也应该把viewport设为一个合适的固定值。我第一个想到的是1920,因为是设计稿的宽度,结果在手机上看虽然缩小了,但是很不幸的,并不能显示完整。于是我使用了1366,就是我电脑的宽度,可以正常显示中间的1200,也没那么宽。果然在iPhone6等的手机上显示完整了,但是在iPhone5上仍然不完整。所以iPhone5需要更小的宽度,但是大于1200,最后我选择了1280。

那么问题又来了,iPhone5和其他手机需要的视口宽度不同,而对于电脑端,屏幕宽度大于1366的显示效果更佳,把视口宽度写死成1366再等比例缩放没必要,要怎么统一这些问题呢?

我使用的办法是用js判断屏幕宽度,根据屏幕宽度的情况动态地加上合适的viewport(默认是没有viewport的)。这样可以做到统一。注意判断屏幕宽度的时候不要用window.innnerWidth,因为这样得到的是屏幕的实际宽度,而手机的dpr大于1,实际宽度是大于我们看到的宽度的。

代码就像这样:(使用了jq)

// 判断屏幕宽度,动态设置视口,如果是大屏幕就不设置
if(window.screen.width < 360) {
	$('head').append('<meta name="viewport" content="width=1280">')
} else if(window.screen.width < 1366) {
	$('head').remove('[name="viewport"]')
	$('head').append('<meta name="viewport" content="width=1366">')
}
else {
	$('head').remove('[name="viewport"]')
}

即使是这样,在高度上,也可能还存在问题。首页的高度足够高了,无论是手机还是电脑,一屏的高度都无法显示完,但如果是内容很少的详情页,或者没有搜索到结果的列表页呢?

比如像这样,footer的部分是紧跟着内容显示的,在电脑上,由于屏幕比例的问题,这个页面可以显示超过一屏,但是在手机上,这些内容显得有限捉襟见肘了。屏幕的下半部分有大量尴尬的空白,footer悬在半空了

效果是这样的——

这个问题的解决办法来自一本叫《CSS揭秘》的书

我简单说一下解决的思路。

1.首先,让页面最外层的容器,也就是body作为flex容器:display: flex;为了让里面元素正常显示,记得设置flex的方向为垂直方向:flex-directive: column;

2.为了保证内容高度大于或等于屏幕高度,body就需要设置最小高度:min-height: 100vh;

3.关键的一步来了,现在虽然body高度是全屏了,但是主体部分如果高度还是太小,那么看起来footer还是很奇怪——所以必须让主体部分占据剩余的高度:flex:1;(我是准备一个叫main的class,有需要的时候加到元素上)

做了这三步之后,效果是这样的——

虽然还是有大段空白,但是footer显示在了屏幕底部,显示在了正确的地方,而且在不同高度的手机上都是这样的,比如下面这两个手机,明显空白的高度是不同的,而底部显示的效果是一样的。

最后补充一个小知识点,怎么在手机上看自己在电脑上写的本地网页

我用的是anywhere。这个是一个命令行工具,首先你的电脑上要安装node.js然后才能安装anywhere:npm install anywhere -g(因为是命令行工具,所以需要全局安装。)然后,进入你项目根目录,存放HTML文件的地方,按shift和鼠标右键,在当前目录打开cmd命令行工具。然后,运行anywhere命令,就可以了,它会告诉你一个url,并自动打开当前目录下的index.html、用手机访问这个url,就可以看到效果啦,当然手机和电脑要连到同一个WiFi才可以

 

  • 27
    点赞
  • 138
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
### 回答1: Vue 可以通过响应式布局和 CSS 媒体查询来适配不同的设备,同时也可以使用第三方库如 Vant、Element UI 等来实现更好的适配效果。在开发时,可以使用 rem 或者 vw/vh 单位来实现页面元素的自适应。同时,也可以使用 Vue Router 来实现路由跳转和页面切换的效果。 ### 回答2: Vue适配PC手机端的方式有几种。 一种常见的方式是使用响应式设计。Vue提供了响应式布局的特性,可以根据设备的屏幕大小和分辨率自动调整页面布局和样式。通过使用Vue的响应式设计,我们可以根据不同的设备,例如PC和手机,来显示不同的布局和样式。这样用户在不同设备上访问网页时可以得到最优的浏览体验。 另一种方式是使用Vue的动态组件。动态组件可以根据设备的类型动态加载不同的组件。比如,在PC端加载一个PC端特有的组件,而在手机端加载一个手机端特有的组件。这样可以根据设备的特性来提供不同的功能和交互。 Vue还提供了一些vue-cli的插件,例如vue-router和vuex,可以帮助我们更方便地进行PC手机端适配。通过使用这些插件,我们可以根据设备的特性来决定加载不同的路由和状态管理。 总之,Vue适配PC手机端的方式有很多种,可以根据具体的项目需求和实际情况选择合适的方式来进行适配。这样可以提供更好的用户体验,同时提高网页的可用性和易用性。 ### 回答3: Vue 是一种用于构建用户界面的开发框架,它可以用于适配 PC手机端。为了实现 PC手机端适配,我们可以采取以下几种方式。 首先,可以使用响应式布局来实现 PC手机端适配。Vue 提供了许多响应式布局的工具,例如使用栅格系统来划分页面布局,通过媒体查询设置不同的样式等。通过合理地设置元素的宽度、高度、布局和间距等属性,可以使页面在不同尺寸的设备上均能良好地展示。 其次,可以通过使用 Vue Router 来实现 PC手机端的路由适配。Vue Router 是 Vue 的官方路由器,它可以帮助我们管理应用程序的路由。通过配置不同的路由规则和组件,可以根据设备的不同为 PC手机端提供不同的页面和功能。例如,在 PC 端可以显示导航栏和侧边栏,而在手机端则可以隐藏这些元素以适应较小的屏幕。 另外,可以使用 Vue 的移动端框架来适配手机端。Vue 提供了一些专门为移动端开发设计的框架,如 Vant、Mint UI 等。这些框架中包含了许多适用于手机端的组件和样式,可以帮助我们快速地搭建出符合手机端界面设计标准的页面。 综上所述,通过响应式布局、Vue Router 和移动端框架的运用,我们可以很好地实现 Vue 在 PC手机端适配。这些方法可以使得我们的应用程序在不同的设备上都能够具备良好的用户体验。
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值