微信小程序 基础知识css样式media标签


Posted in Javascript onFebruary 15, 2017

微信小程序 基础知识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;
 }
}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
自己整理的一个javascript日期处理函数
Oct 16 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
jquery实现pager控件示例
Apr 09 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
ajax异步请求详解
Jan 06 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
vue打包npm run build时候界面报错的解决
Aug 13 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 Javascript
js 性能优化之快速响应的用户界面
Feb 15 #Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 #Javascript
DOM事件探秘篇
Feb 15 #Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 #Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 #Javascript
JS 实现随机验证码功能
Feb 15 #Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 #Javascript
You might like
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
php递归创建目录的方法
2015/02/02 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
JS中的this变量的使用介绍
2013/10/21 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
简单的三步vuex入门
2018/05/20 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
Vue中props的详解
2019/05/16 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
web.py获取上传文件名的正确方法
2014/08/26 Python
十个Python程序员易犯的错误
2015/12/15 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
简单了解python的一些位运算技巧
2019/07/13 Python
Python之字典对象的几种创建方法
2020/09/30 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
python解包用法详解
2021/02/17 Python
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
EJB的角色和三个对象
2015/12/31 面试题
北大研究生linux应用求职信
2013/10/29 职场文书
个性与发展自我评价
2014/02/11 职场文书
2014年母亲节寄语
2014/05/07 职场文书
篮球比赛策划方案
2014/06/05 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
先进个人自荐书
2015/03/06 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL