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

2024-11-30 17:36:24

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

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

JS中静态页面实现微信分享功能

微信分享网页的时候,希望分享出来的链接是标题+描述+缩略图,微信开发代码示例里已提供了方法,但只适用于动态页面.我使用phpcms把页面生成了静态文件,示例代码就起不到作用了.在网上找了下,有大神使用ajax实现静态页面也能实现微信分享功能,在这里分享给大家. 前台代码: <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> url=locatio
JS实现微信弹出搜索框多条件查询功能

效果图如下所示: JS实现微信弹出搜索框多条件查询功能的实现代码如下所示:  <!DOCTYPE html> <
JS 调用微信扫一扫功能

1.第一步: 设置调用微信js安全域名,就可以在该域名下调用微信的js接口 2.第二步: 将下面的js附在需要调用微信扫一扫的页面上,前提是需要引入微信的js[] 3.第三步: 参考官方文档 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=876521668&lang=zh_CN 通过后台获取js权限签名jsapi_ticket[参考文档:http://mp.weixin.qq.com/
js仿微信公众平台打标签功能

今天刚刚完成了一个小功能:"仿微信公众平台的-打标签",随笔记下欢迎纠错: 操作介绍:选择人物列表点击"打标签"按钮可实现对当前已选择的人物添加新的标签: 自己分析的实现思路: 1.点击"打标签"时要"知道"那些人物被选择了~~遍历当前人物列表 2.得到被选择人物列表后还得知道他们下面的标签都有啥~~遍历选择人物的标签列表 3.得到当前可以使用的标签列表~~额..还是遍历得到废话讲的有点多.来几张图片压压惊.网页效果\(^o
JavaScript微信定位功能实现方法

分享下微信是如何定位的: 本文主要讲解如何利用微信定位,如何将定位到的经纬度转换为百度地图对应的经纬度,以及处理定位失败.取消及错误时的默认做法. //获取地理位置信息start //封装成一个函数 function getPosition() { //用ajax请求 $.ajax({ url: "/wechat/jssdk",//请求地址 type: 'post',//post请求 dataType: 'json', contentType: "application/x-
微信小程序基础知识css样式media标签

微信小程序基础知识css样式media标签前言: 微信小程序中我遇到了一个对我来说是新的东西,但是对于前端开发来说不算是新知识,html页面中的media标签,在此记录下来以备不时之需在css中我们使用media标签来区分调用哪个css样式,比如使用media="print"来表示当执行打印文档时,使用print.css样式.这样使得文档更有得于打印,如将页面宽度增宽.或屏蔽掉一些不需要打印的内容. <link href="styles/main.css"
详解mpvue开发微信小程序基础知识

一.mpvue简介 mpvue 是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验.mp 即 mini program 的缩写. 二.mpvue快速入门 ① 通过脚手架引入mpvue模板 vue 3.0已经不支持vue init命令了,所以需要单独安装@vue/cli-init,安装好之后,就可以按以下操作步骤
微信小程序基础教程之echart的使用

前言先看下最终实现的效果–自己做的小demo 首先到ECharts官网下载官网地址根据上面的网址下载代码把ec-canvas文件拷贝下来放到你自己的项目中, 我放的是tool文件夹下面,你们随意引入的时候注意路径就行 2.使用然后在你需要用的页面引入,在json中加入,这里要注意路径echart.json "usingComponents": { "tab":"../../component/tabs/tab", "ec-canv
微信小程序 JS动态修改样式的实现代码

微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动态的修改数据,从而实现动态样式的改变而已.感觉有点········那个啥的,怪怪的.不过也没办法了.如果你有更好的方法,可以在评论区分享一下. test.wxml <view style="text-align: center;"> <label style="
详解微信小程序通过控制CSS实现view隐藏与显示

详解微信小程序通过控制CSS实现view隐藏与显示实现效果图: 视图代码,使用变量控制隐藏类名 <scroll-view scroll-y="true" > <view class="user_freeback"> <view class="txt"> <text> 为了更好地帮助您解决问题,请准确填写您的邮箱地址和电话号码,以便管理员给你答复.</text> </view&g
微信小程序基础组件与导航组件详细介绍

微信小程序基础组件与导航组件详解: 1.基础组件 1.1 图标 icon 1.2 文本 text 1.3 进度条 progress 2.导航组件(navigator) 1.基础组件 1.1 图标 icon (1)总结 (2) 案例效果截图 page.wxml <view class="type-group"> <block wx:for="{{iconType}}"> <icon type="{{item}}&qu
微信小程序仿RadioGroup改变样式的处理方案

最开始想改变Radio的样式,但是发现自己写比较方便就直接写了一个. 先上效果: wxml: <view bindchange="radioChange"> <view class='list_item' wx:for="{{radioValues}}" data-index="{{index}}" bindtap='radioChange' style="{{index == radioValues.length-1
微信小程序自定义单项选择器样式

本文实例为大家分享了微信小程序自定义单项选择器样式的具体代码,供大家参考,具体内容如下效果: wxml: <view bindchange="radioChange"> <view class='list_item' wx:for="{{radioValues}}" data-index="{{index}}" bindtap='radioChange' style="{{index == radioValues.l
微信小程序点击切换样式scroll-view实现代码实例

这篇文章主要介绍了微信小程序点击切换样式scroll-view实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 scroll-view滚动视图点击切换样式 *.wxml <view class="content"> <view class="navbg"> <view class="nav"> <scroll-view class="
微信小程序 JS动态修改样式的实现方法

前言本文主要介绍了关于微信小程序 JS动态修改样式的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧先写一个不怎么好看的demo,通过点击事件来控制view的元素属性,把背景改变成蓝色. 是这样的效果: 代码如下: 上一份小代码 index.wxml <view > <view class="cont" style="background:{{background}};">属性改变</view> <

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

相关推荐

随机推荐

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