使网站更适合移动设备

时间:2021-05-05 23:56:08

标签: html css

试图让我的网站更适合移动设备,但无法理解此处提供的帮助。我有以下设置,一个基本的索引页面和一个样式表 css 页面。我有为我网站上的所有文本设置的 div 元素和 < p > 元素。

p {
    font-family: Arial;
    font-size: 20px;
    left: 150px;
    position: relative;

}

是我的 < p > 元素,在桌面上查看时将其推离左侧。我网站上的所有文本都在 < p > 标签之间,我也使用标签达到相同的效果。我正在尝试使我的页面更适合移动查看,并且已将

有什么方法可以让我在从移动设备上查看时,它没有 left: 150px;属性,所以它更好地填充屏幕?我唯一的另一个因素是

div {  
  width: 1000px;   
  border: 0px solid black;  
}  
div.a {  
  word-wrap: normal;  
}  
div.b {  
  word-wrap: break-word;

}  

当我写了一两段文字时,我用它来包装文本以适应屏幕。

1 个答案:

答案 0 :(得分:1)

您可以尝试删除 left: 150px; 并添加 text-align: center。它会影响桌面和移动视图。

或者您可以添加此媒体查询:

@media screen AND (max-width: 767px) {
p { 
   text-align: center !important; 
 }
}

您可以更改 max-width (max-width: 767px) 的值并创建您喜欢的任何断点。只需更改移动视图的 css 规则并将它们添加到媒体查询中即可。