Maison > Article > interface Web > Exemple de partage de code pour pratiquer les requêtes HTML5 CSS3Media
Exemple de partage de code pour pratiquer les requêtes HTML5 CSS3Media
- 黄舟original
- 2017-03-28 15:21:151826parcourir
Présentons d'abord les médias. Pour être précis, il devrait s'agir de requêtes multimédias CSS (cible CSS Mediaquery), une requête multimédia contient un type de média et au moins un attribut tel que la largeur, la hauteur et la couleur pour limiter la portée de la feuille de style. 🎜>Expression. La requête média ajoutée par CSS3 permet d'appliquer le style à certaines plages d'appareils sans modifier le contenu alors. code ci-dessous. Vous pouvez certainement le deviner
Concernant l'explication, le document dit que lorsque la requête multimédia est vraie, la feuille de style ou les règles de style associées seront appliquées en fonction. aux règles de cascade normales. Même si la requête multimédia renvoie false, la feuille de style avec la requête multimédia sur la balise 2cdf5bf648cf2f33323966d7f58a7f3f sera toujours téléchargée (elle ne sera tout simplement pas appliquée
<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询 -->
<style>@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}</style>). C'est donc aussi un inconvénient. Si plusieurs normes de style sont définies pour une certaine page afin de répondre à différents attributs multimédias, le temps de chargement de la page en sera affecté, mais cela dit, à l'ère actuelle du réseau rapide. développement, les vitesses du réseau s'améliorent également constamment, de sorte que l'impact n'est pas important et peut presque être ignoré
les médias peuvent également utiliser des opérateurs logiques
(et, non, seulement, etc.) pour former des expressions médiatiques et écrire des conditions de filtrage plus complexes. Je n'expliquerai pas ces expressions une par une ici,Ensuite, nous utiliserons plusieurs démos pour démontrer le fonctionnement. utilisation et performances des médias
Puisque notre objectif aujourd'hui est d'explorer comment surveiller les modifications de l'attribut devicePixelRatio, nous allons alors modifier le style arrière-plan
d'un certain p. sous différentes valeurs de devicePixelRatio. Le code spécifique est le suivant :Maintenant que le code est là, comment le tester dans des circonstances normales, l'attribut devicePixelRatio ne changera pas ? , mais il y aura certainement des circonstances particulières. Par exemple, votre ordinateur est connecté à deux moniteurs et à deux navigateurs. L'attribut devicePixelRatio est différent, alors félicitations, vous avez déjà les conditions de test. Il vous suffit de faire glisser la page d'un écran à l'autre. un autre, afin que vous puissiez voir l'effet. >Les étudiants qui vont tester constateront que la couleur d'arrière-plan de p n'est pas celle définie dans le code. Elle affiche différentes couleurs sous différentes valeurs d'attribut devicePixelRatio. Pourquoi ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
@media screen and (min-resolution: 2dppx) {
#image {
background : red;
}
}
@media screen and (min-resolution: 1dppx) {
#image {
background: #000;
}
} </style>
</head>
<body>
<p id="image" style="width:100px; height:100px"></p>
</body>
</html>Ce code est le premier que j'ai écrit. Après l'avoir exécuté, j'ai constaté qu'il n'avait aucun effet au début. , dans la console du navigateur, j'ai trouvé la raison. Alors, quelle est la raison pour laquelle les paramètres ne sont pas valides ? Jetons un coup d'œil aux captures d'écran du contenu Style sous deux écrans. Le côté gauche a une résolution minimale égale à 1 et le côté droit est égal à 2
🎜>.
En comparant les deux images, vous pouvez constater que lorsque la résolution minimale est égale à 2, les propriétés qui y sont définies sont écrasées et ne prennent pas effet. Pourquoi ?Pour expliquer, j'ai bien peur de devoir ajouter quelques connaissances ici, c'est-à-dire que les effets spécifiques des préfixes min- et max- dans le code sont décrits dans le document. : La plupart des propriétés multimédias sont préfixées par "min-" et "max-", qui sont utilisés pour exprimer "supérieur ou égal à" et "inférieur ou égal à". Cela évite l'utilisation de caractères "0e23ddf2cd2db17fefda28fe66f19a88" qui entrent en conflit avec HTML et
XML. Si vous ne spécifiez pas de valeur pour la propriété media et que la valeur réelle de la propriété est différente de zéro, l'expression est résolue en true. Les expressions contenant cette valeur d'attribut renvoient généralement false si le navigateur s'exécute sur un appareil qui ne possède pas cette valeur d'attribut. 其实上面的说明已经帮我解释清楚了，我再通俗地和大家解释一下：当 devicePixelRatio 为 1 时，只有 min-resolution: 1dppx 这个条件满足，因此 p 的颜色是黑色没错；当 devicePixelRatio 为 2 时，两个 media 都满足条件，同时 CSS 的规则是后加载的样式将会覆盖先加载的样式，由于我么将 min-resolution: 1dppx 的 media 写在后面，因此如果两个 media 都满足条件的话， min-resolution: 1dppx 的 media 将会覆盖 min-resolution: 2dppx 的 media，因此不管你把页面拖到那个屏幕，那个 p 的背景色都是黑色。 那么我们将两个 media 调换一下位置，问题就顺利地解决了。 以上是根据不同的 media 条件设置不同的样式，这是 CSS 的做法，在 JavaScript 中，没有专门的方法来监听 window.devicePixelRatio 属性变化，那么该怎么监听 devicePixelRatio 属性的变化呢?方法也很简单，看看下面的代码，你一定就明白了： 稍微解释下，通过 window.matchMedia(‘media expression’) 方法获取到对应的 media，然后通过 addListener(function(e) {}) 来监听 media 的变化。 有玩过 Canvas 的朋友一定知道，要想绘制出来的内容效果最佳的话，Canvas 自身的 width 和 height 属性值与 style 中的 width 和 height 的比例应该恰好等于 devicePixelRatio 的值，所有如果你在切换不同 devicePixelRatio 属性值的屏幕时，没有重新设置 Canvas 的宽高的话，绘制出来的画面将不是最佳的效果。 接下来我们基于 HT for Web 的 3D 模型来做一个小实验。实验的内容是这样的，在 GraphView 中有一辆车根据某条路线前行，当拖到另外一个屏幕的时候，换辆车子。先来看看效果图： 上面两张图分别是在不同的屏幕中的截图，车子动起来的效果可以访问以下链接： 来介绍下这次 Demo 中都用到的了 HT for Web 的那些技术。 首先是车子，车子并不是通过 HT for Web 生成的，而是通过专业的 3D 工具设计，然后导出 obj 和 mtl 文件，HT for Web 对 obj 和 mtl 文件进行解析，然后显示在 Graph3dView 中， 在 obj 文档中，你会看到一个一个飞机的例子，飞机沿着设定好的路线飞行，你应该会想，这个寻路是怎么实现的呢？其实很简单，我们将路线切割成一个个很小很小的单元，然后根据算法依次获取到小单元的坐标设置到移动的物体上，这样物体就动起来了。 在 Demo 中，有一条很精致的马路，这条马路就是一个 Shape 节点，根据车的路径生成的马路，Shape 是一个六面体，因为首尾相连了，所以没有左右面，在这个例子中，我将马路的 back 和 top 面隐藏了，然后 bottom 面支持翻转，让 bottom 面的贴图显示在内表面上，这样马路就建成了。
<style media="screen">
@media screen and (min-resolution: 1dppx) {
#image {
background: #000;
}
}
@media screen and (min-resolution: 2dppx) {
#image {
background : red;
}
}</style>window.matchMedia('screen and (min-resolution: 2dppx)').addListener(function(e) {
console.info(e, window.devicePixelRatio);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HT for Web</title>
<style media="screen">
@media screen and (min-resolution: 2dppx) {}
html, body {
padding: 0px;
margin: 0px;
} </style>
<script src="../../oldhtforweb/lib/core/ht.js"></script>
<script src="../../oldhtforweb/lib/plugin/ht-modeling.js"></script>
<script src="../../oldhtforweb/lib/plugin/ht-obj.js"></script>
<script>
ht.Default.setImage('road', './images/road.jpg');
var init = function() {
g3d = new ht.graph3d.Graph3dView();
var dm = g3d.dm();
g3d.addToDOM();
g3d.setEye(1200, 300, 0);
g3d.getNote = function(data) {
if (data.getTag() !== 'carNode') return null;
return 'DevicePixelRatio : ' + window.devicePixelRatio;
};
var carIndex = 0;
window.matchMedia('screen and (min-resolution: 2dppx)').addListener(function() {
carIndex = (carIndex + 1) % 2;
var obj = result[carIndex];
carNode.s('shape3d', obj.name);
ht.Default.setDevicePixelRatio();
});
var polyline = createPath(dm, 300),
params = {
delay: 0,
duration: 10000,
easing: function(t){
return (t *= 2) < 1 ? 0.5 * t * t : 0.5 * (1 - (--t) * (t - 2));
},
action: function(v, t){
var length = g3d.getLineLength(polyline);
var offset = g3d.getLineOffset(polyline, length * v),
point = offset.point,
px = point.x,
py = point.y,
pz = point.z,
tangent = offset.tangent,
tx = tangent.x,
ty = tangent.y,
tz = tangent.z;
carNode.p3(px, py - 9, pz);
carNode.lookAt([px + tx, py + ty - 9, pz + tz], 'front');
},
finishFunc: function(){
ht.Default.startAnim(params);
}
},
carList = [ 'fordFocus', 'concept-sedan-01v2'],
result = [], carNode = new ht.Node();
carNode.setTag('carNode');
carList.forEach(function(name, index) {
ht.Default.loadObj('./objs/'+name+'/'+name+'.obj', './objs/'+name+'/'+name+'.mtl', {
cube: true,
center: true,
shape3d: name,
finishFunc: function(modelMap, array, rawS3) {
var k = 110 / rawS3[0];
rawS3 = rawS3.map(function(v) { return v * k; });
result[index] = {
'name' : name,
'modelMap' : modelMap,
'array' : array,
'rawS3' : rawS3
};
if (index === 0) {
var node = carNode;
node.s({
'wf.width' : 0,
'shape3d' : name,
'note.position' : 44,
'note' : 'DevicePixelRatio : ' + window.devicePixelRatio,
'note.face' : 'top',
'note.autorotate' : true,
'note.font' : '46px arial, sans-serif'
});
node.s3(rawS3);
node.r3(0, Math.PI, 0);
dm.add(node);
polyline.setElevation(rawS3[1] * 0.5 + 2);
ht.Default.startAnim(params);
}
}
});
});
}; var createPath = function(dm, radius) {
var polyline = new ht.Polyline();
polyline.setThickness(2);
polyline.s({
'shape.border.pattern': [16, 16],
'shape.border.color': 'rgba(0, 0, 0, 0)',
'shape3d.resolution': 300,
'3d.selectable': false
});
dm.add(polyline);
var cx = 0,
cy = radius * Math.PI * 0.5,
count = 500,
points = [{ x: radius, y: -cy, e: 0 }],
segments = [1];
for (var k = 0; k < count + 1; k++) {
var angle = k * Math.PI / count;
points.push({
x: cx + radius * Math.cos(angle),
y: cy + radius * Math.sin(angle),
e: 0
});
segments.push(2);
}
cy *= -1;
radius *= -1;
for (var k = 0; k < count + 1; k++) {
var angle = k * Math.PI / count;
points.push({
x: cx + radius * Math.cos(angle),
y: cy + radius * Math.sin(angle),
e: 0
});
segments.push(2);
}
polyline.setPoints(points);
polyline.setSegments(segments);
var shape = new ht.Shape();
shape.setPoints(points);
shape.setSegments(segments);
shape.s({
'top.visible' : false,
'bottom.image' : 'road',
'bottom.reverse.flip' : true,
'bottom.uv.scale' : [13, 1],
'back.visible' : false,
'front.reverse.flip' : true,
'3d.selectable': false
});
shape.setThickness(180);
shape.setTall(15);
shape.setClosePath(true);
dm.add(shape);
return polyline;
}; </script>
</head>
<body onload="init();">
</body>
</html>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!