我正在学习开发wordpress主题，但发现了一些奇怪而烦人的问题。
在桌面上，一切都很好，但是当我从手机上打开它时，外观会有所不同。
我附上了Google chrome和Firefox输出的两个屏幕截图。 Firefox提供了不错的外观，而google chrome提供了更大的文本，听起来不太好。
我该如何解决编码问题，使两者看起来相同。
这里是CSS的代码
.home-2-article {
display: flex;
background-color: white;
box-shadow: 0 0 8px rgba($font-color,.5);
margin-bottom: 20px;
@media only screen and (max-device-width: 599px) {
display: flex;
flex-direction: column;
margin-bottom: 3rem;
}
& > * {
padding: .3rem;
}
&__thumbnail {
flex: 0 0 35%;
margin-right: 1rem;
@media only screen and (max-device-width: 599px) {
margin: 0;
}
img {
width: 100%;
height: auto;
}
}
&__wrapper {
&__title {
h2 {
font-size: 1.5em;
@media only screen and (max-device-width: 599px) {
font-size: 3em;
text-align: center;
}
}
}
&__meta {
display: flex;
@media only screen and (max-device-width: 599px) {
font-size: 1.7em;
justify-items: center;
justify-content: center
}
;
& > * {
padding: 0.5rem;
}
}
&__excerpt {
padding-bottom: .5rem;
p {
font-size: 1em;
@media only screen and (max-device-width: 599px) {
font-size: 2em;
padding: 0.3rem;
}
}
}
.home-2-article__rm {
a {
background-color: $primary-color-dark;
padding: 0.2rem .6rem;
color: white;
@media only screen and (max-device-width: 599px) and (max-width: 599px) {
font-size: 1.7em;
text-align: center;
display: block;
}
&:hover {
background-color: $primary-color;
transition: 1s all ease-in-out;
}
}
}
}
}