微信小程序 基础知识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 相关文章推荐
js去除空格的12种实用方法
Nov 08 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 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
3
2006/10/09 PHP
Laravel框架表单验证详解
2014/09/04 PHP
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
详解python3百度指数抓取实例
2016/12/12 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
为什么要做架构设计
2015/07/08 面试题
运动会通讯稿150字
2014/02/15 职场文书
人力资源主管职责范本
2014/03/05 职场文书
公司运动会策划方案
2014/05/25 职场文书
淘宝好评语句大全
2014/12/31 职场文书
如何写好竞聘报告
2019/04/03 职场文书