web官网实现字体、图片响应式

字体响应式

如果是vue项目，在app.vue中，或者单独写一个css文件，引入到main.js中

html {
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;
}
  /* 像素都是1920px,而笔记本显示125%，就是比1920px多25%，那就缩小25%，就是1536px */
@media screen and (min-width: 768px) and (max-width: 1536px) {
    /* 样式规则适用于笔记本电脑 */
    html {
        font-size: 13px;
      }
      
  }

em和rem  

em是相对父元素，rem相对于根元素（一般浏览器默认字体大小16px）

图片响应式

.home_img {
  width: 60%;
  max-width: 668px;
  overflow: hidden;
  position: absolute;
  top: 17%;
  right: 6%;
}
.home_img img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

补充

不论是台式机还是笔记本，像素都是1920px(一个像素通常对应于显示器上的一个物理像素点)

只不过笔记本显示是125%，台式机显示是100%