时间戳

首页 > 解决方案 > 使网站更适合移动设备

html - 使网站更适合移动设备

问题描述

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

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

}

是我的 <p> 元素，在桌面上查看时将其推离左侧。我网站上的所有文本都在 < p > 标签之间，我也使用标签来达到同样的效果。我正在尝试使我的页面更适合移动查看，并且已将其添加到我的代码中，但希望对其进行更好的自定义。

什么是我可以做到的方法，所以当从移动设备查看时，它没有左边：150px；属性，所以它更好地填充屏幕？我唯一的另一个因素是

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

}

当我写一两个段落时，我用它来包装文本以适应屏幕。

标签： htmlcss

解决方案

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

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

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

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

推荐阅读