我是设计新手，最近遇到了这个问题。我在我的笔记本电脑上编码，它的屏幕比我的外部显示器小，我在那里显示我的网站。当我把我正在工作的网站移到我的笔记本电脑上时，我注意到大小不一样。下面的第一个截图是我的外部监视器上的显示，我想要显示的项目：

但当我在笔记本电脑上移动网站时，大小变得不同:

有什么办法可以解决这个问题吗？我目前正在阅读有关媒体查询的内容，想知道这是否能解决我的问题。

顺便说一句，下面是我的HTML和CSS代码:

顺晟科技：

如果外部显示器和笔记本电脑具有相同的分辨率，而您使用的是Windows10，可能是您有不同的缩放设置。将其设置为100%并测试。

右键单击桌面>显示设置>显示很容易找到。

我假设你所说的“大小”是指截面的宽度。问题是单元没有响应。

更改以下内容:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  color: rgb(48, 48, 48);
  line-height: 1.9;
  background-color: #f3f3f3;
}

.logo {
  color: black;
  text-transform: uppercase;
  letter-spacing: 10px;
  padding-right: 150px;
  padding-top: 12px;
}

.logo img {
  width: 170px;
  height: 75px;
  padding-top: 8px;
  /* padding-right: ; */
  /* border: 2px solid black; */
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: 'Poppins', sans-serif;
  background-color: #f3f3f3;
  width: 100%;
  z-index: 100;
  height: 80px;
  /* position: relative; */
  /* border-bottom: 1px solid black; */
  /* padding: 0 5rem; */
}

.nav-links {
  display: flex;
  /* justify-content: space-around; */
  width: 30%;
}

.nav-links li {
  list-style: none;
  padding: 26px 40px;
}

.nav-links a {
  color: black;
  text-decoration: none;
  letter-spacing: 2px;
  font-size: 15px;
}

nav li:hover {
  background-color: rgb(6, 168, 106);
}

nav li:hover a {
  color: white;
}

/* Section */
.section {
  padding: 5rem 25rem;
  border-bottom: 1px solid rgb(187, 185, 185);
  /* display: flex; */
}

.section-header {
  display: flex;
}

.section1img {
  width: 300px;
  height: 400px;
  /* margin: 60px 150px; */
}

.section1Desc {
  padding: 20px 20px;
  margin-left: 50px;
  text-align: justify;
}

.btnLearnMore {
  background-color: rgb(12, 201, 160);
  border: none;
  border-radius: 5px;
  padding: 10px;
  margin-top: 30px;
  font-size: 20px;
  color: white;
}

.bamboo-section {
  display: flex;
}

.imgBamboo {
  width: 300px;
  height: 400px;
}

.bamboo-description {
  /* margin-left: 125px; */
  margin-top: 50px;
}

.bamboo-description h3 {
  color: rgb(16, 143, 16);
}

.btnKalma {
  border: none;
  border-radius: 5px;
  background-color: rgb(25, 179, 145);
  color: white;
  padding: 5px;
  font-size: 17px;
  margin-top: 25px;
}

.btnKalma:hover {
  background-color: rgb(3, 143, 112);
}

.bamboo-description p {
  margin-top: 25px;
  text-align: justify;
  margin-right: 100px;
}

.lavender-section {
  display: flex;
  margin-top: 75px;
}

.lavender-description {
  margin-left: 100px;
  margin-top: 50px;
}

.lavender-description h3 {
  color: rgb(202, 0, 158);
}

.lavender-description p {
  text-align: justify;
  margin-top: 25px;
}

.imgLavender {
  width: 300px;
  height: 400px;
}

.btnHimbing {
  text-decoration: none;
  border: none;
  border-radius: 5px;
  background-color: rgb(165, 50, 180);
  color: white;
  padding: 5px;
  font-size: 17px;
  margin-top: 25px;
}

.btnHimbing:hover {
  background-color: rgb(122, 4, 138);
}

.intro-header {
  text-align: center;
}

.section-body {
  margin-top: 50px;
}

.benefits-body {
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
}

.first-box i {
  color: green;
  font-size: 25px;
  margin-top: 5px;
}

.second-box {
  margin-left: 375px;
}

.second-box i {
  color: rgb(165, 16, 165);
  font-size: 25px;
  margin-top: 5px;
}

.mainlist {
  list-style-type: none;
}

.mainlist li {
  margin-top: 15px;
}

.sublist {
  margin-left: 35px;
  list-style-type: square;
}

.imgAboutBamboo {
  width: 50%;
  /* height: 400px; */
  display: block;
  margin: 25px auto;
}

.imgAboutLavender {
  width: 50%;
  /* height: 400px; */
  display: block;
  margin: 25px auto;
}

.list-Details {
  margin-left: 50px;
}

.break-line {
  display: block;
  margin-top: 50px;
  border: 1px solid rgb(150, 146, 146);
}

.about-body {
  margin-top: 25px;
}
.about-himbing {
  margin-top: 25px;
}

到此:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  color: rgb(48, 48, 48);
  line-height: 1.9;
  background-color: #f3f3f3;
}

.logo {
  color: black;
  text-transform: uppercase;
  letter-spacing: 10px;
  padding-right: 150px;
  padding-top: 12px;
}

.logo img {
  width: 170px;
  height: 75px;
  padding-top: 8px;
  /* padding-right: ; */
  /* border: 2px solid black; */
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: 'Poppins', sans-serif;
  background-color: #f3f3f3;
  width: 100%;
  z-index: 100;
  height: 80px;
  /* position: relative; */
  /* border-bottom: 1px solid black; */
  /* padding: 0 5rem; */
}

.nav-links {
  display: flex;
  /* justify-content: space-around; */
  width: 30%;
}

.nav-links li {
  list-style: none;
  padding: 26px 40px;
}

.nav-links a {
  color: black;
  text-decoration: none;
  letter-spacing: 2px;
  font-size: 15px;
}

nav li:hover {
  background-color: rgb(6, 168, 106);
}

nav li:hover a {
  color: white;
}

/* Section */
.section {
  padding: 5rem 25rem;
  border-bottom: 1px solid rgb(187, 185, 185);
  /* display: flex; */
}

.section-header {
  display: flex;
}

.section1img {
  width: 300px;
  height: 400px;
  /* margin: 60px 150px; */
}

.section1Desc {
  padding: 20px 20px;
  margin-left: 50px;
  text-align: justify;
}

.btnLearnMore {
  background-color: rgb(12, 201, 160);
  border: none;
  border-radius: 5px;
  padding: 10px;
  margin-top: 30px;
  font-size: 20px;
  color: white;
}

.bamboo-section {
  display: flex;
}

.imgBamboo {
  width: 300px;
  height: 400px;
}

.bamboo-description {
  /* margin-left: 125px; */
  margin-top: 50px;
}

.bamboo-description h3 {
  color: rgb(16, 143, 16);
}

.btnKalma {
  border: none;
  border-radius: 5px;
  background-color: rgb(25, 179, 145);
  color: white;
  padding: 5px;
  font-size: 17px;
  margin-top: 25px;
}

.btnKalma:hover {
  background-color: rgb(3, 143, 112);
}

.bamboo-description p {
  margin-top: 25px;
  text-align: justify;
  margin-right: 100px;
}

.lavender-section {
  display: flex;
  margin-top: 75px;
}

.lavender-description {
  margin-left: 100px;
  margin-top: 50px;
}

.lavender-description h3 {
  color: rgb(202, 0, 158);
}

.lavender-description p {
  text-align: justify;
  margin-top: 25px;
}

.imgLavender {
  width: 300px;
  height: 400px;
}

.btnHimbing {
  text-decoration: none;
  border: none;
  border-radius: 5px;
  background-color: rgb(165, 50, 180);
  color: white;
  padding: 5px;
  font-size: 17px;
  margin-top: 25px;
}

.btnHimbing:hover {
  background-color: rgb(122, 4, 138);
}

.intro-header {
  text-align: center;
}

.section-body {
  margin-top: 50px;
}

.benefits-body {
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
}

.first-box i {
  color: green;
  font-size: 25px;
  margin-top: 5px;
}

.second-box {
  margin-left: 375px;
}

.second-box i {
  color: rgb(165, 16, 165);
  font-size: 25px;
  margin-top: 5px;
}

.mainlist {
  list-style-type: none;
}

.mainlist li {
  margin-top: 15px;
}

.sublist {
  margin-left: 35px;
  list-style-type: square;
}

.imgAboutBamboo {
  width: 50%;
  /* height: 400px; */
  display: block;
  margin: 25px auto;
}

.imgAboutLavender {
  width: 50%;
  /* height: 400px; */
  display: block;
  margin: 25px auto;
}

.list-Details {
  margin-left: 50px;
}

.break-line {
  display: block;
  margin-top: 50px;
  border: 1px solid rgb(150, 146, 146);
}

.about-body {
  margin-top: 25px;
}
.about-himbing {
  margin-top: 25px;
}