解决vue移动端适配问题-创新互联

1，先看看网上关于移动端适配讲解

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都做网站、网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的西充网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

再聊移动端页面适配，rem和vw适配方案！

基础点：rem相对根节点字体的大小。所以不用px;

根字体：字体的大小px;

px：你就当成cm(厘米)这样的东西吧；

基准：750设计稿；

这是方案的基础理论，在这个基础上，我们还要搞明白，到底要干一件什么事情！

目标一、手机适配：就是页面上的尺寸，无论高度，还是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是不是想到了vw，对，就是这个意思；——大程度在各个尺寸屏幕上还原设计稿

目标二、px转换成rem：一般UI给的设计稿宽度大小是750，所以，我们想直接写上面UI标记的尺寸；——大程度减少工作

为什么选择rem?

很久之前没有vw，怕vw的兼容问题，就用了rem；也就是：rem的兼容性>vw的兼容性；

还有一种就是自己写百分比很不优雅

一、理论基础！

实现目标一

用rem就可以了吧！因为rem就可以随根字体大小改变而改变，从而实现了自适应的功能。

但是，但是，重点来，如果，根字体的大小默认是16px；那么，我们的1rem；就永远是16px，懂么？也就是如果设计稿是750（放大了一倍，iphone是375pt),我们想要个50%的大小:

50%*357px/16=11.718rem

如果我们写一个11.718rem的宽度，然而这只能在能iphone6还原设计稿，也就是只有在iphone6上这样的宽度才刚好占一半；

那么问题来了，如果在每个屏幕上都是50%呢，直接改变根字体大小（16px)不就完了么！！；11.718rem永远还是那个11.718rem，不用担心；

实现目标二、

用工具，webpack，postcss,postcss-pxtorem

二、准备主要工具！

viewport: 建议自行百度；

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享题目：解决vue移动端适配问题-创新互联
浏览地址：https://www.cdcxhl.com/article20/csjeco.html

成都网站建设公司_创新互联，为您提供网页设计公司、服务器托管、响应式网站、域名注册、建站公司、小程序开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联