vue react 移动端适配 viewpoint @media iphonex刘海屏适配

对于需要在移动端展示的页面来说，由于移动设备各种各样，展现效果也就有了很大的不同，所以做移动端适配是个费劲但是又不得不做的事情。那么我们来说一下如何去应对这种情况。

网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、小程序制作、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了定日免费建站欢迎大家使用！

对于移动端适配，要从2个角度去考虑：

第一个就是需要根据分辨率不同自适应页面大小

第二个是对于刘海屏的特殊处理

所以我们需要使用2套方案来完成移动端的适配

网上有大量的文章来讲分辨率自适应方案，比如rem计算font-size字体大小来作为单位进行像素的换算，比如使用css3新的语法 vw vh 等等百分比单位来计算，等等。相信如果一个新手来看这一堆东西，估计会蒙半天，特别是rem的计算方式，太过繁杂。

根据我花费了大量时间之后总结出来的经验，我最终确定了一个方案来实现。我觉得这个是目前还算简便的方式，所以记录在这里。那就是 ----- 利用scss函数方式 结合 vw vh 百分比显示

通常我们会拿到一个UI设计稿，UI设计稿上会有设计时屏幕的宽高（如果没有UI稿就自己确定一个长宽就可以了）

理解起来非常简单：就2步

如此设置，不管在小屏，大屏，手机，平板，pc， 都会按比例缩放显示元素了

关于刘海屏，等异形屏，我的首要建议就是对于能够从UI设计上就能预留出刘海高度的，最好能直接预留出高度设计。这样就不需要做异形屏幕的适配。

正常来说，我们的页面会分为以下两种情况

对于其中参数不明白的，可以参考其他教程中的解释，在此我就不再赘述了，比如在文章底部列出的参考文章。

这样就实现了屏幕的适配

结语：屏幕适配的各种兼容情况层出不穷，我这套方案应该也会有不兼容的情况出现，所以如果有更好的解决方案欢迎大家留言。对于一些 constant env calc safe-area-inset-bottom 等等这些语法不熟悉的话，大家可以去搜索下，一搜就有。希望这套方案足够简洁明了，能够帮助到一些想快速实现的朋友。

感谢其他作者宝贵的经验和参考：

- 有关viewport的介绍

- 菜鸟课堂 有关@media的各种参数的整理介绍

- 对于@supports方法的展示

- 对于@media的应用

- 对于@media的应用

...

vue移动端项目中使用postcss-pxtorem进行适配方案

首先，我们先使用vue-cli创建一个初始化的vue项目。

当项目创建好以后，我们在根目录下新建一个 vue.config.js ，想必大家也都懂这个文件是干什么的。

既然是使用 postcss-pxtorem 对移动端项目进行适配，那肯定先要安装它，于是我们在电脑上敲下这行命令

postcss-pxtorem 有一个好伙伴 amfe-flexible ，也需要一并安装。

当我们安装好这两个依赖以后呢，我们就要使用它们了，先在 main.js 中引入 amfe-flexible

然后我们在 vue.config.js 文件中对 postcss-pxtorem 进行配置。

原文链接：

网站制作比较好的公司都有哪些?有好的推荐么？

网站制作比较好的公司都有哪些？有好的推荐么？假如想快速建站，可以找这家自助建站平台

创建一个网站一点都不难，只要有了网站模板，小白也能轻松建立起自己的网站，这么好的网站制作新模式也慢慢的被人们广泛使用。

为什么说使用自助建站系统的网站模板这种方式好呢？

传统的网站制作方式，需要网站策划、美工设计、WEB程序等各领域专业人士的合作，其中涉及到的人力物力财力是十分巨大的，所耗时时间也不好估算，一个人也很难完成这所有的工作。

而使用了网站模板就不一样了。你不需要学习HTML、PHP、CSS等等的编程语言，不需耗费众多的资源和时间，省去繁琐的网站制作环节，直接套用专业的网站模板，根据自身实际需求，通过简单的操作修改，就可以轻松的制作出属于自己的网站。当然找到适合自己的网站模板也并非易事，我们可以到一些自助建站平台去找，模板涵盖面越广越好。

看完上面的内容，如果你也想要体验自助建站的魅力，那就快到上面的平台了解更多吧！

css移动端的兼容性问题 （适配问题）

css移动端的兼容性问题 （适配问题）

一、浮动问题

简述：

我们在平时切页面时,经常会出现用完浮动(float),忘记删除.下面的布局出现莫名其妙的空白高度,导致布局调整失败

避免使用浮动

二、

链接:

1、水平居中—使用 text-align

2、margin: auto 居中

3、table-cell 居中

4、Absolute 居中

5、使用 translate 居中

6、使用 Flexbox 居中

7、使用 calc 居中

三、常见的兼容性问题

四、css hack

五、css filter

六、更换渲染模式

七、浏览器内核

八、让H5页面适应所有的iphone手机以及安卓机型的六大技巧

九、REM 布局

当前文章：zblog移动适配 zblog typecho
转载注明：http://ybzwz.com/article/dddicio.html