[分享]css取手机屏幕的大小

在移动设备上，屏幕大小的不同是常见的现象。为了能够适应不同的屏幕，我们可以使用CSS来设置我们的网站和移动应用程序。下面是一些利用CSS检测屏幕大小的方法：media only screen and ...

在移动设备上，屏幕大小的不同是常见的现象。为了能够适应不同的屏幕，我们可以使用CSS来设置我们的网站和移动应用程序。下面是一些利用CSS检测屏幕大小的方法：

@media only screen and (max-device-width: 480px) {
  /*作用于小于等于480像素的屏幕*/
}

@media only screen and (min-device-width: 480px) and (max-device-width: 768px) {
  /*作用于大于480像素并且小于等于768像素的屏幕*/
}

@media only screen and (min-device-width: 768px) {
  /*作用于大于等于768像素的屏幕*/
} 

此处将代码包含在pre标记中，可以保证代码在文章中不会丢失格式，而是按照本来的缩进空格输出。

事实上，上述代码都是利用CSS3提供的媒体查询功能来检测屏幕大小的。我们也可以使用JavaScript来实现相同的功能。下面是一个例子：

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

if (width <= 480) {
  //作用于小于等于480像素的屏幕
} else if (width > 480 && width <= 768) {
  //作用于大于480像素并且小于等于768像素的屏幕
} else {
  //作用于大于等于768像素的屏幕
} 

这个例子包含了一个JavaScript函数，可以在网页加载时检测屏幕大小，并根据检测结果改变网页的样式风格等。

总的来说，在移动设备上使用CSS、JavaScript等技术检测屏幕大小，可以更好地适应不同的屏幕，并提供更好的用户体验。