小程序之基础知识css样式media标签详解
微信小程序 基础知识css样式media标签
前言:
微信小程序中我遇到了一个对我来说是新的东西,但是对于前端开发来说不算是新知识,html页面中的media标签,在此记录下来以备不时之需
在css中我们使用media标签来区分调用哪个css样式,比如使用media=”print”来表示当执行打印文档时,使用print.css样式。这样使得文档更有得于打印,如将页面宽度增宽、或屏蔽掉一些不需要打印的内容。
<link href="styles/main.css" rel="external nofollow" rel="stylesheet" type="text/css" media="screen" /> <link href="styles/print.css" rel="external nofollow" rel="stylesheet" type="text/css" media="print" /> <link href="main.css" rel="external nofollow" rel="stylesheet" type="text/css" media="all'/>
下边是media标签的10个值,可见常用的并不多。当没有media标签时,默认为media=”all”。
all– 用于所有设备类型
aural– 用于语音和音乐合成器
braille– 用于触觉反馈设备
embossed– 用于凸点字符(盲文)印刷设备
handheld– 用于小型或手提设备
print– 用于打印机
projection– 用于投影图像,如幻灯片
screen– 用于计算机显示器
tty– 用于使用固定间距字符格的设备。如电传打字机和终端
tv– 用于电视类设备
在上边引用css样式时,我们引用了两次。我们完全可以引用一个css样式来达到我们的目的,这样也可以提高css样式加载速度,
实现代码如下:
CSS代码
@media all { body{ font:12px; width:100%;} } @media print { body{ font:14px; width:595px;} /* 用于打印时将宽度设置为595px(A4) */ }
以上media标签是css中的标准语法,所有浏览器都支持media标签,但下面的写法出IE6\7\8 以为的浏览器都支持
CSS代码
@media all and (min-width: 1001px) { #sidebar ul li a:after { content: " (" attr(data-email) ")"; font-size: 11px; font-style: italic; color: #666; } } @media all and (max-width: 1000px) and (min-width: 700px) { #sidebar ul li a:before { content: "Email: "; font-style: italic; color: #666; } } @media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { #sidebar ul li a { padding-left: 21px; background: url(../images/email.png) left center no-repeat; } }
也有人这么搞
@media screen and (-webkit-min-device-pixel-ratio: 1.0), screen and (min--moz-device-pixel-ratio: 1.0), screen and (min-device-pixel-ratio: 1.0), screen and (min-resolution: 1.0dppx) { .icon-del { background-image: url(../../resources/images/ui_3@2x.png); background-size: 274px 228px; display: block; } }
以上是小程序之基础知识css样式media标签详解的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

有用户在启动联想笔记本时,出现checkingmedia无法启动的问题,让人不知所措,那么联想电脑checkingmedia开不了机如何解决?本期教程就为大家带来联想笔记本出现checkingmedia无法启动原因及解决办法。导致原因:1、硬盘损坏:若联想笔记本存在硬盘损坏、故障的问题,会导致笔记本显示checkingmedia且开不了机。操作系统损坏:若联想笔记本的操作系统损坏,会导致笔记本显示checkingmedia且开不了机。2、重新开机,按F12进入BIOS,在“启动”项

MySQL是一个开源的关系型数据库管理系统,被广泛地应用于Web应用程序的开发和数据存储。学习MySQL的SQL语言对于数据管理员和开发者来说是非常必要的。SQL语言是MySQL中的核心部分,因此在学习MySQL之前,你需要对SQL语言有充分的了解,本文旨在为你详细讲解SQL语句基础知识,让你一步步了解SQL语句。SQL是结构化查询语言的简称,用于在关系型数

Yii是一款流行的面向对象PHP框架,它的全称是“YesItIs”,表示“是的,它就是这样的”。它的设计目标是高效、快速、安全和易于使用,因此被广泛应用于大型Web应用程序的开发中。在这篇文章中,我们将介绍Yii框架的一些基础知识,帮助新手更好地了解这个框架。MVC架构Yii框架采用了基于MVC(Model-View-Controller)的设计模式,这

从零开始:学习Go语言的基础知识简介Go语言,又称Golang,是一种由Google开发的开源编程语言。它于2009年发布,并迅速成为一种流行的语言,尤其是在Web开发、分布式系统和云计算等领域。Go语言以其简洁、高效、并发性强等特点而著称。基本语法1.变量和常量在Go语言中,变量和常量都是类型化的。变量可以存储数据,而常量则不能改变。变量的声明格式为:v

学习canvas需要掌握哪些基础知识?随着现代Web技术的发展,使用HTML5中的<canvas>标签进行绘图成为一种常见的方式。Canvas是一种用于绘制图形、动画和其他图像的HTML元素,它可以利用JavaScript进行操作和控制。如果你想要学习canvas并掌握其基础知识,下面将为你详细介绍。HTML和CSS基础知识:在学习canvas之

《Go语言程序基础知识深入探讨:具体代码示例解析》Go语言作为一种快速、高效的编程语言,越来越受到程序员和开发者的青睐。在学习和掌握Go语言的过程中,深入了解其基础知识是至关重要的。本文将从变量、数据类型、流程控制以及函数等方面展开深入探讨,同时结合具体的代码示例来帮助读者更好地理解和掌握Go语言的基础知识。变量和数据类型在Go语言中,变量的声明和初始化非常

快速入门Go语言编程:基础知识与实践指南Go语言作为一门新兴的编程语言,因其简洁、高效和并发性而备受开发者的青睐。无论你是初学者还是有一定编程经验的开发者,本文将带你快速入门Go语言编程,并提供一些实践指南和具体代码示例。一、安装Go语言环境要开始使用Go语言进行编程,首先需要在你的计算机上安装Go语言环境。你可以从Go官方网站(https://golang

从零开始学习Go语言输入函数的基础知识Go语言是一种由Google开发的静态类型、编译型、并发型的编程语言。它拥有简洁的语法、高效的并发模型和优秀的性能,因此备受开发者青睐。在学习Go语言的过程中,理解输入函数是非常重要的基础知识之一。本文将从零开始,介绍Go语言输入函数的基础知识,并给出具体的代码示例。1.fmt包在Go语言中,fmt包是用于格式化输入和
