试图让我的网站更适合移动设备,但无法理解此处提供的帮助。我有以下设置,一个基本的索引页面和一个样式表 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;
}
当我写了一两段文字时,我用它来包装文本以适应屏幕。
答案 0 :(得分:1)
您可以尝试删除 left: 150px;
并添加 text-align: center
。它会影响桌面和移动视图。
或者您可以添加此媒体查询:
@media screen AND (max-width: 767px) {
p {
text-align: center !important;
}
}
您可以更改 max-width (max-width: 767px)
的值并创建您喜欢的任何断点。只需更改移动视图的 css 规则并将它们添加到媒体查询中即可。