响应式布局-PC端和移动端同时适配

Posted 2023-04-23

参考技术A 第二种 rem响应式布局方案(等比缩放)：
使用的时候按照1920的设计稿来做。100px=1rem，font-size设置成100px; 750px的设计稿 1rem = 100px 设置屏幕超过2560及以上，就固定1rem = 200px， 宽度小于600及以下，就固定1rem = 32px
第三方库用的一般是使用px单位，无法使用rem适配不同设备的屏幕。
解决办法：使用px2rem-loader插件将第三方ui库的px转换成rem单位。

移动端设计稿一般都是750px的，所切的图就是@2x 的，在一些DPR为3.0的手机上使用@2x图片大多数也会显示的很清晰，这样就是为什么设计稿要750px的

移动优化的原理

本文重点介绍做SEO移动优化的原理和目的：

如果我们的模版是采用的响应式模版，那PC端和移动端是采用的同一套的排名，不需要单独做什么。

如果是pc+手机模版，那么pc的排名会同步适配给移动端，也就是在做seo的过程中专注做pc的排名就可以。

对于移动端，我们只要做好对应适配工作，那么优化过程中pc端的排名就会同步适配给移动端，

就不需要专门对移动端做过多的优化工作，所以我们做seo的时候重点还是放到pc端就可以。

移动优化的三个注意点：

1、是否做了手机网站，做了移动优化。

2、地域性明显：location定位标签设置。

3、打开速度：百度资源平台内部抓取诊断不能超过三秒。