CSS 命令 微信公众平台 自适应屏幕大小_百度知道
CSS 命令 微信公众平台 自适应屏幕大小
下面就告诉大家如何解决。& &1.&&使用HTML中的viewport来实现viewport语法如下：HTML代码&&!--在html代码的&head&...&/head&中嵌入下面代码--&&meta&name=&viewport&&&content=&&&&&height&=&[pixel_value&|&device-height]&,&&&&width&=&[pixel_value&|&device-width&]&,&&&&initial-scale&=&0.5&,&&&&minimum-scale&=&float_value&,&&&&maximum-scale&=&float_value&,&&&&user-scalable&=&[yes&|&no]&,&&&&&/&width控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。height和 width 相对应，指定高度。initial-scale初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。&&maximum-scale最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。user-scalable用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。(设置屏幕宽度为设备宽度，禁止用户手动调整缩放)HTML代码&&meta&name=&viewport&&content=&width=device-width,user-scalable=no&&/&(设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放)HTML代码&&metaname=&viewport&&content=&width=device-width,target-densitydpi=high-dpi,initial-scale=1.0,&minimum-scale=1.0,&maximum-scale=1.0,&user-scalable=no&/&注：1). 所有的缩放值都必须在0.01–10的范围之内。& && & 2). minimum-scale、maximum-scale要么写值，要不留这两个2. 不使用绝对宽度& & 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，CSS代码不能指定像素宽度：　　width:只能指定百分比宽度：　　width: xx%;或者　　width:3. CSS的@media规则& &&&同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。HTML代码&@media&screen&and&(max-device-width:&400px)&{　　.column&{　　　　float:&　　　　width:　　}　　#sidebar&{　　　　display:　　}}上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。4.&&流动布局& & 各个区块的位置都是浮动的，不是固定不变的。HTML代码&&&　.main&{　　　　float:&　　　　width:&70%;　　}　　.leftBar&{　　　　float:&　　　　width:&25%;　　}float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。另外，绝对定位（position: absolute）的使用，也要非常小心。5. 图片的自适应& & 图片的宽度和高度要按百分比来设定，千万不可以设定成固定大小。HTML代码&&&&img&width=&95%&&src=&&&alt=&&&/&
其他类似问题
为您推荐：
提问者采纳
那你可以用这个单位显示为铺满一排，也要看你的字数多少：font-size:3。如果你是想要文字根据屏幕大小改变。例子.6vmin
字数不够我打空格的，能给个演示列子吗，比如：&百度知道
百度知道&这句话显示为一排，适应各种分辨率大小的屏幕，字体大小20PX
如果要做适应各种分辨率大小的屏幕，字体大小就不能用px，6vmin是根据你的效果图上字体的大小来进行调整。&style&
.test{ font-size:6 }&/style&&div class=&test&&演示列子演示列子&/div&
这个代码在微信里用不了啊，可以加我吗
提问者评价
自适应的相关知识
其他2条回答
自适应不同的手机分辨率，有个专门的标签叫：viewport
能给个演示代码不？
真外行，这也能采纳，viewport都告诉你了，一找一大把资料。。
这个不会,不过你可以百度一下，有些自学网上面有教
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁申请的微信公众号10天了，素材管理那里点上传图片没反应，不能群发图文信息，但是能群发文字，这是什么_百度知道
申请的微信公众号10天了，素材管理那里点上传图片没反应，不能群发图文信息，但是能群发文字，这是什么
素材管理那里点上传图片没反应，这是什么情况，但是能群发文字，不能群发图文信息申请的微信公众号10天了
因为上传进度极其慢导致这个进程关闭而无法正常上传，若网速太慢的话会出现这样的问题。换一个浏览器打开微信公众平台后台。检查一下你的网络环境是不是太差、谷歌浏览器之类的，尝试上传图片查看效果、360，IE这样的问题一般不是微信后台的问题
我是手机操作的，是这个原因导致不能上传吗
很有可能，即使微信官方将后台开发的兼容性再好也会存在PC端和移动端使用的不同。
其他类似问题
为您推荐：
其他2条回答
怎么不能 直接上传就可以 了
文字信息可以发，图文信息要加载图片才能发，问题是点上传图片没反应（前提：我是手机操作）
额 那就用电脑撒
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁有谁知道微信公众号 设置里面的修改头像 点击修改头像 然后在点击选择图片 点击选择图片就没反应了_百度知道
有谁知道微信公众号 设置里面的修改头像 点击修改头像 然后在点击选择图片 点击选择图片就没反应了
有谁知道微信公众号&设置里面的修改头像&点击修改头像&然后在点击选择图片&点击选择图片就没反应了&点击了也没用&&发表文章&上传图片也是一样&点击没缉伐光和叱古癸汰含咯反应&&哪位大神知道&帮忙指点下&&非常感谢&&&微信号gsw
审核通过了？换个浏览器试试，内核至少得是IE10版本，公众平台挺挑的。
还有这种要求
现在常规操作系统的浏览器版本都比较高了，但还有个别的会不正常～
来自团队：
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁利用微信公众号搭建微课程平台探究
&|&&|&&|&&|&&|&&|&
&&没有公告
您现在的位置：&&>>&&>>&&>>&&>>&正文
利用微信公众号搭建微课程平台探究
&&&&&&&&&&★★★
【字体： 】
利用微信公众号搭建微课程平台探究
作者：&&&&文章来源：本站原创&&&&点击数：&&&&更新时间：&&&&
利用微信公众号搭建微课程平台探究
肇庆市实验中学& 唐金萍
[摘要] 随着微课程在国内如火如荼的开展，为了更好地帮助学生利用碎片时间学习，积极使用微课程提高学习效率，因此搭建移动的、开放的、免费的资源平台是移动学习的有力保障。本文分析并比较了微信公众号相对其它平台的优势，同时利用微信公众号搭建了信息技术微课程平台，期望能为其他学科教师提供参考。
[关键词] 微信公众号& 微课程
随着移动互联网的迅猛发展和微课程开发热潮，为了更好地帮助学生利用碎片时间学习，积极使用微课程提高学习效率，搭建移动的、开放的、免费的资源平台是非常必要的。目前，国内现有的微课程平台大部分基于PC版的Web应用，使用手机浏览有些不便，因此研究利用微信公众号搭建微课程平台具有一定的现实意义。
一、建立移动的、开放的、免费的资源平台的必要性
1. 近年来，移动网络通信技术和移动设备制造技术的快速发展，以及伴随着移动智能终端在公众的迅速普及，使得移动互联网进入一个黄金发展时期。随着4G时代的到来和无线宽带的迅猛发展，手机呈现的内容越来越丰富，如视频播放、视频通话、语音对讲、多媒体内容分享等等。
2.手机上网已成为人们常见的上网模式，中学生也不例外，使用手机获取知识和讨论交流已成常态。手机浏览器由于受到屏幕大小的限制，浏览PC版的Web网站需要进行拖动才能浏览所有内容,使用不便，需要建立一个基于手机浏览，而且完全开放、免费的资源平台，为移动学习提供优质服务，因此利用微信公众号搭建微课程平台应运而生。
二、现有微课程平台的局限性
1.面向PC版Web应用，不利于手机浏览
中学阶段，大部分学生在校住宿，除了一周一节的信息技术课可以使用电脑外，其它时间基本不能接触电脑，学生只能使用智能手机上网学习，目前最大的微课程网---中国微课网没有手机版应用，使用不便，而且带来的手机流量也是一个需要考虑的问题。
2.交互性不强，不利于交流讨论
学生在学习微课后，需要向老师提出问题，由于上传微课的老师来自全国各地，无法做到一对一的同步交流，虽然现有的微课程网具有评论这一功能，但这种交互具有一定的滞后性，不利于问题的讨论与解决。另外，现有的微课程网没有小组讨论区，需要借助第三方软件如QQ建立群组才能实现相互交流，但由于QQ软件定位于即时通讯，腾讯公司并无意为网络教学平台提供个性化定制，没有提供诸如关键词自动回复消息，内容发布管理功能；更为重要的是，QQ 软件被定位为腾讯公司封闭的即时通讯软件，未给予第三方提供透明的数据接口,这极大地降低了QQ 替代网络教学平台的可能性。
3.手机版微课程平台，无法实现跨平台浏览
现有的手机版微课程平台，大部分基于谷歌android系统开发，这让苹果IOS系统、微软WM7系统等用户望尘莫及，无法实现真正意义的共享。
三、微信公众号搭建微课程平台的优势
1.消息内容丰富，分享速度快
微信公众号可发送的消息种类繁多,可以是文字、图片、图文也可以是语音、视频等内容。教师可以利用该平台向学生发送多种形式的学习资源,学生在学习过程中不会感到单调，有利于学习兴趣的培养。另外，微信的朋友圈功能分享资源迅速，有价值的资源可以迅速扩展，而且全部免费，真正做到天下还有免费的午餐。
2.申请免费，操作便捷
微信公众号之订阅号是完全免费的,每位教师可以申请一个微信公众号。学生只需使用微信扫一扫微课程的微信公众号就可以关注该平台,或者使用微信在公众号中搜索公众号名即可。微信公众号的操作方法也简单便捷,只要会使用微信便可以简单自如地操作微信公众号，没有使用过微信的，需要先下载和安装微信，简单学习就可以轻松操作。
3.交互的高时效性
教师利用微信公众号向学生发送消息,学生即可收到消息,具有很强的同步性。学生查看消息后,可以回复消息,进行及时的交流沟通。另外,如果遇到不懂的问题需要进一步讨论,教师可以建立一个群聊,参加群聊的学生可以及时地与其他学生互相讨论,交流时还可用语音交流,有利于问题的表达。
4.自主选择性强，节省流量
教师通过该平台上传微课程，学生可以通过建立的导航交互菜单自助选择感兴趣的教学内容进行学习。同时学生通过微信公众号提供的自定义、关键词回复功能，可自主查询微课程、常见问题、提出个性化的问题，由平台自动或教师人工进行回复，省时省流量。
5.可拓展性好
微信公众号提供了第三方数据接口，可以实现更多功能，教师可以根据自己的实际需要，使用百度BAE搭建个性化公众号，从而为学生提供更好的服务。
四、利用微信公众号搭建信息技术微课程平台
1.注册微信公众号流程，流程图如4-1所示。
第一步：打开微信公众平台主页，点击右上角“立即注册”，填写基本信息。
第二步：到邮箱激活邮件。
第三步：登记个人信息，需要正确填写身份证号码，并上传手持身份证正反面的免冠照片，需五官清晰。
第四步：选择类型，订阅号是免费的，服务号需要收取一定的认证费用，服务号的功能比订阅号强大。
第五步：填写公众号名称功能介绍等信息。
第六步：注册成功，等待审核。
2.编辑模式（介绍常用功能）
（1）素材管理，可以是图文、图片也可以是语音或视频，先将所需要的素材上传到素材管理中。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
（2）群发功能，群发的媒体形式可以是文字、图片、语音、视频、图文。
（3）自动回复
单击自动回复的设置按钮，编辑模式的自动回复方式有三种：被添加自动回复、消息自动回复和关键词自动回复，回复的媒体形式与群发功能类似。教师可以将一些常见问题以自动回复的方式回复给学生，从而减少教师工作量，学生遇到不懂的问题可以反复的观看视频，也可以暂停思考，有利于发挥学生的主观能动性。
（4）自定义菜单，可以添加3个一级菜单，5个二级菜单，在“设置动作”中设置指向的内容。
添加菜单之后，效果如图4-2所示，单击“遮罩动画”，效果如图4-3所示。
五、利用微信公众号搭建微课程平台的思考
1.潜力展望
微信公众号因其使用的便捷性、内容推送的高时效性和精准性等特点，符合现代中学生的行为习惯，为微课程平台的推广运用奠定了良好的基础，微课程必将得到更广泛的使用，从而不断提高教学质量。随着数据挖掘技术的发展，利用微信公众号搭建的微课程平台将会为学生提供更有针对性、个性化的优质服务，不断推进教学模式的改革。
2.存在问题
高质量的微课是有效学习的前提，因此教师开发的微课程要增强课程吸引力，激发学生探究知识的兴趣，加深并巩固学生对知识点的认识和理解，促进学生自主学习能力的培养。如何提高教师制作微课的技能？如何开发高质量的微课资源？如何将零散的微课通过知识地图的方式构成一个整体？这些都是我们值得思考和需要解决的问题。另外，虽然微课因其短、小、精、悍等特点广受学生喜爱，但五彩斑斓的网络世界有更精彩的内容吸引学生，如何引导学生充分利用微课进行学习，而不在互联网中迷失，这也是需要我们研究的重要课题。
[参考文献]
[1]赵敬，李贝，微信公众平台发展现状初探，新闻实践，8-10，2013-8.
[2]钟志勇.微信公众平台应用开发实战[J].中国科技信息,.
[3]刘飞. HTML 流移动自适应转换关键技术的研究与实现[D].& 中国海洋大学，2012.
[4]黄文伟. 结合腾讯QQ 设计研究电大网上教学平台的思考[J].湖北广播电视大学学报，2011，31（10）：11-12.
[5]微信公众平台，.
文章录入：想飞的小鱼&&&&责任编辑：唐金萍&
上一篇文章： 下一篇文章：
【】【】【】【】【】
没有相关文章
　　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）
版权所有：肇庆市实验中学学校地址：广东省肇庆市高要南岸镇府前大街1号 网站备案号：粤ICP备号查看: 9299|回复: 2
注册时间最后登录阅读权限200积分101精华0帖子
初来乍到, 积分 101, 距离下一级还需 199 积分
& & 在做微信公众平台开发的朋友应该会遇到这样的问题，开发的网页在不同分辨率的手机显示大小不同，不能根据分辨率的不同而自动调节大小，下面就告诉大家如何解决。& &
1.&&使用HTML中的viewport来实现
viewport语法如下： &!--在html代码的&head&...&/head&中嵌入下面代码--&
&meta name=&viewport&
&&content=&
&&&&height = [pixel_value | device-height] ,
&&&&width = [pixel_value | device-width ] ,
&&&&initial-scale = 0.5 ,
&&&&minimum-scale = float_value ,
&&&&maximum-scale = float_value ,
&&&&user-scalable = [yes | no] ,
width控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height和 width 相对应，指定高度。initial-scale初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。&&maximum-scale最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。 user-scalable用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。
(设置屏幕宽度为设备宽度，禁止用户手动调整缩放)&meta name=&viewport& content=&width=device-width,user-scalable=no& /&
(设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放)&meta
name=&viewport& content=&width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no&
注：1). 所有的缩放值都必须在0.01–10的范围之内。 & && & 2). minimum-scale、maximum-scale要么写值，要不留这两个
2. 不使用绝对宽度
& & 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
具体说，CSS代码不能指定像素宽度：
　　width:
只能指定百分比宽度：
　　width: xx%;
　　width:
3. CSS的@media规则
& &&&同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
　　@media screen and (max-device-width: 400px) {
　　　　.column {
　　　　　　float:
　　　　　　width:
　　　　#sidebar {
　　　　　　display:
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。
4.&&流动布局
& & 各个区块的位置都是浮动的，不是固定不变的。
&&　.main {
　　　　float:
　　　　width: 70%;
　　.leftBar {
　　　　float:
　　　　width: 25%;
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
另外，绝对定位（position: absolute）的使用，也要非常小心。
5. 图片的自适应
& & 图片的宽度和高度要按百分比来设定，千万不可以设定成固定大小。
&&&img width=&95%& src=&& alt=&& /&
注册时间最后登录阅读权限200积分14632精华5帖子
感谢楼主分享~~
注册时间最后登录阅读权限200积分473精华1帖子
新手小白, 积分 473, 距离下一级还需 127 积分
哈哈，加精原来也不是那么难？
Powered by}