解决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: 建议自行百度;
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
名称栏目:解决vue移动端适配问题-创新互联
网页网址:http://myzitong.com/article/csjeco.html