网站PC适配

七月上_tao

已于 2023-08-31 10:10:27 修改

阅读量108

点赞数

于 2021-10-18 15:48:51 首次发布

本文链接：https://blog.csdn.net/qi_qi_ai/article/details/120827954

版权

网站PC或移动端适配

网站的PC或移动端适配是指确保网站在不同设备上都能正常显示和运行的过程。为了适应不同的设备，需要对网站设计和布局进行相应的调整和优化。其中，移动端的适配更加重要，因为越来越多的用户使用移动设备访问网站。

以下是一些适配网站PC或移动端的常用方法：

响应式设计：采用响应式设计可以让网站根据不同设备的屏幕尺寸和分辨率自动调整布局和内容。
手机优先设计：在设计网站时先考虑移动设备的用户体验，确保在手机上能够正常浏览和使用网站。
自适应图片：使用自适应图片可以让网站在不同设备上加载图片时自动适应不同的屏幕大小和分辨率，提高网站速度和用户体验。
简化页面元素：在移动端显示网站时，需要尽量简化页面元素和内容，减少加载时间和流量消耗。
使用流式布局：流式布局可以让网站在不同的屏幕尺寸和分辨率下自动调整布局和内容，提高用户体验。

总之，适配网站PC或移动端需要考虑多方面因素，包括设计、布局、图片、内容等，综合考虑，选择最适合自己网站的方法进行适配。

 // rem计算 - 开始
var baseSize = 100
function setRem() {
    var scale = document.documentElement.clientWidth / 750
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 3)) + 'px'
}
setRem()
window.onresize = function () {
    setRem()
}
750是UI设计图的比例，单位rem直接除以100就行。