利用media属性区分设备

来源：互联网发布：软件开发面试题编辑：程序博客网时间：2024/05/22 10:57

现在由于手持设备，智能手机大行其道。同一页面很难应用到各种不同大小的设备中，针对不同设备特制页面开销又太大。

解决方式是利用media属性智能识别各种设备，并应用不同的CSS式样。

方案一：

用HTML的<link>元素中的media属性来区分设备：

<link rel="stylesheet" href="xxx.css"  media="screen and (max-device-width: 480px)">

screen表示用于有屏幕的设备（这样就无法用于打印机，3D眼镜，盲文阅读机），max-device-width表示屏幕的最大宽度。

因此上述代码表示：如果加载该页面的设备的屏幕小于480像素，就应用xxx.css式样

类似可以创建打印机设备的CSS：

<link rel="stylesheet"href=“xxx.css"media="print">

media属性的orientation能区分portrait竖屏，landscape横屏：

<link rel="stylesheet" href=“xxx.css"  media="screen and (max-device-width: 1024px) and (orientation: portrait)">

上述代码表示：如果加载该页面的设备的屏幕小于1024像素，且为竖屏，就应用xxx.css式样。

如竖屏1024*768像素的ipad就将加载xxx.css式样，改成landscape就是横屏的ipad

方案二：

也可以在CSS中为不同设备单独定制指定元素的式样

@media screen and (min-device-width: 481px) {  //屏宽大于480px的设备p#xxid { margin-right: 200%; }}@media screen and (max-device-width: 480px) {  //屏宽小于481px的设备p#xxid { margin-right: 150%; }}@media print {//打印设备…}

上述代码根据不同屏宽的设备，为页面上某元素指定不同的右外边距

※当然推荐还是如方案一那样，在HTML端的<link>的media中指定，将同一种设备的css放到一个css文件内，根据不同设备加载不同css

常用设备：（依次为手机，竖屏横屏ipad，台式机，电视机）

<link rel=“stylesheet” href=“smartphone.css“media=”screen and (max-device-width: 480px)”><link rel=“stylesheet” href=“ipad.css“media=”screen and (max-device-width: 1024px) and (orientation:portrait)”><span style="color:black;">//orientation</span><span style="color:black;">设成</span><span style="color:black;">landscape</span><span style="color:black;">即为横屏</span><link rel="stylesheet" href="pc.css“media="screen and (max-device-width: 1280px)"><link rel="stylesheet" href="tv.css“media="screen and (max-device-width: 2650px)">

更多HTML端<link>元素的media属性的介绍：http://www.w3schools.com/tags/att_link_media.asp

更多CSS端@media规则的介绍：http://www.w3schools.com/css/css_mediatypes.asp

0 0