gpt4 book ai didi

css - 具有媒体属性的内部样式表

转载 作者:太空宇宙 更新时间:2023-11-04 08:57:45 25 4
gpt4 key购买 nike

我正在尝试使用内部样式表的媒体属性。我正在为移动设备使用 media=printmedia=handheld。但是,这是行不通的。不确定为什么?

编辑:我想要得到的结果是,media="print,测试 text = blue 和 picture 是静态的。Media="handheld",测试 text = red 和 picture 是响应/动态的。

<html>
<head>
<style media="print">

p.slide {
width:1040 px;
height:383 px;
color:#00F;
}

</style>
<style media="handheld">
p.slide {
width:20%;
height:10%;
color:#F00;
}
</style>
</head>
<body>
<div>

<p class="slide">
test
<img src="https://hpva2w-ch3301.files.1drv.com/y4m3P0wDLAI8GVZl1qYwcsqB9AFNfl5mJCFQw_f3627uFXESiPUbkJmyrLNvzVaz4uIIA8vlEX3i11Frkm8p8VGDSwyW8Oempo79nFvc2xFJe5KuKOpVT6ZhNUSasTvPRfX7PBsdL6riiJf8aaSs7McYyZSc9gL0qQZPJEXAk3fjlV93b3bpoxtCBglvXHIQut7RTaM12d0vcrbEvzv-DtQ8A?width=1024&height=683&cropmode=none" >

</p>
</div>
</body>

</html>

最佳答案

它工作正常,但你不能在 jsfiddle 上测试“打印”和“手持”。 (它不接受媒体属性,您不能在 CSS 字段中定义 <style media="">

<html>
<head>
<style media="print">

p.slide {
width:1040 px;
height:383 px;
color:#00F;
}

</style>
<style media="handheld">
p.slide {
width:20%;
height:10%;
color:#F00;
}
</style>
</head>
<body>
<div>

<p class="slide">
test
<img src="https://hpva2w-ch3301.files.1drv.com/y4m3P0wDLAI8GVZl1qYwcsqB9AFNfl5mJCFQw_f3627uFXESiPUbkJmyrLNvzVaz4uIIA8vlEX3i11Frkm8p8VGDSwyW8Oempo79nFvc2xFJe5KuKOpVT6ZhNUSasTvPRfX7PBsdL6riiJf8aaSs7McYyZSc9gL0qQZPJEXAk3fjlV93b3bpoxtCBglvXHIQut7RTaM12d0vcrbEvzv-DtQ8A?width=1024&height=683&cropmode=none" >

</p>
</div>
</body>

</html>

关于css - 具有媒体属性的内部样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42990627/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com