首页 微信小程序 小程序开发 小程序之基础知识css样式media标签详解

小程序之基础知识css样式media标签详解

Sep 19, 2017 am 09:35 AM
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中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
威尔R.E.P.O.有交叉游戏吗?
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

联想电脑checking media开不了机如何解决? 联想电脑checking media开不了机如何解决? Feb 12, 2024 am 08:36 AM

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

学习MySQL必看!详细讲解SQL语句基础知识 学习MySQL必看!详细讲解SQL语句基础知识 Jun 15, 2023 pm 09:00 PM

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

Yii框架的一些基础知识 Yii框架的一些基础知识 Jun 21, 2023 pm 07:07 PM

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

从头学习:掌握Go语言的基础知识 从头学习:掌握Go语言的基础知识 Feb 01, 2024 am 08:45 AM

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

学习canvas,需要了解哪些基本概念? 学习canvas,需要了解哪些基本概念? Jan 17, 2024 am 10:37 AM

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

深入探讨Go语言程序的基础知识 深入探讨Go语言程序的基础知识 Mar 05, 2024 am 08:15 AM

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

Go语言编程入门指南:基础知识与实际应用速成 Go语言编程入门指南:基础知识与实际应用速成 Jan 23, 2024 am 09:31 AM

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

从零开始学习Go语言输入函数的基础知识 从零开始学习Go语言输入函数的基础知识 Mar 28, 2024 am 08:12 AM

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

See all articles