如何根据用户屏幕大小

时间:2015-12-22 21:27:39

标签: android html css

是否有任何方法可能使用PHP(不包括js / jquery,因为我不知道如何使用它)来让用户屏幕化并使用它来使css与之一起工作

例如,如果我使用百分比而不是像素来设置我的高度和宽度,它仍然不响应我的手机的屏幕尺寸,并且用户必须放大以清楚地看到信息,它不会使它更大,而且我不仅仅意味着文本,图像和html元素,如divs / span / we ......

我也不想使用bootstrap,我想了解它是如何工作的,使用bootstrap就像驾驶自动汽车而不知道如何驾驶手册......

2 个答案:

答案 0 :(得分:1)

小型设备的网页设计的一个重要内容是将其包含在所有页面的标题中:

<meta name="viewport" content="width=device-width"; initial-scale="1.0" />

它会停用页面内容自动“缩小”/缩减到当前视口(=屏幕)大小,这对智能手机和平板电脑非常重要。像素仍然是一个像素,因此如果您的智能手机屏幕只有320像素宽,那就是绝对像素的宽度限制。

如果不包含此内容,内置自动只会将非响应页面的宽度解释为100%并将其压缩到设备的宽度,这将导致微小的字体和图像,您可以在每个非反复的网站上看到。

之后,你必须成为媒体查询的朋友......

答案 1 :(得分:0)

有一些框架可以帮助你获得这种行为。最容易使用的是Twitter Bootstrap。它很容易设置和理解。它使用网格来确定页面中元素相对于设备宽度的大小。此外,还有许多预建项目可能会帮助您入门。

另一个有用的框架是foundation,这个概念与twitter bootstrap非常相似。尽管它更灵活,但需要更多时间来学习如何使用它。

如果您打算自己进行适应性功能,或者如果您有兴趣了解这是如何实现的,那么您应该调查媒体查询。