小程序开发-基础-html+css

rem由来 ：font size of the root element，那么rem是个单位，单位大小由它第一代老祖宗的 font-size 的大小决定。现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康，因为不仅要知道rem是个单位，更重要的是要知道怎么能在不同分辨率下呈现的页面都很NB。

事故造成原因：

1.px单位在PC上很流行，在手机屏幕上一看，MLGB的，同样的12px却小的跟蚂蚁似的。

2.好不容易在iPhone4上调的正常了，换个菊花牌手机，MBD不堪入目了。

3.知道了rem的用法，但是html的font-size到底是多少才合适啊啊啊，妈蛋~。

好了，那么现在来解决这些问题。

在解决之前，麻烦各位大婶要了解一些你可能不想了解的东东（警告：不了解这些就不能知道真相哟~）：

1. 物理像素(physical pixel)

我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒（物理像素）组成的。

2.逻辑像素

是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。

3.设备的像素比(device pixel ratio)简称DPR

它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备的DPR的大小：

DPR= 物理像素 / 逻辑像素

那么了解了上面这些概念，就可以知道，为什么css在pc上写着font-size=12px但是换到手机上却变小了？因为DPR啊啊啊，大哥~。

没错，我们在电脑屏幕上的DPR是1，但是手机却不同，可能是它可能是2，也可能是3。获取设备DPR的方法还是有的：

1.在JavaScript中，通过window.devicePixelRatio来获取

2.在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同DPR的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

本人也在网上看了不少动态设置rem的文章，下面把几个常用的列举出来：

一，用媒体查询来设置html的font-size：

@mediascreen and (min-width:320px) {html{font-size:14px}} @mediascreen and (min-width:360px) {html{font-size:16px}} @mediascreen and (min-width:400px) {html{font-size:18px}} @mediascreen and (min-width:440px) {html{font-size:20px}} @mediascreen and (min-width:480px) {html{font-size:22px}} @mediascreen and (min-width:640px) {html{font-size:28px}}

二、利用js来动态设置

!(function(doc, win){vardocEle = doc.documentElement,        evt ="onorientationchange"inwindow?"orientationchange":"resize",        fn =function(){varwidth = docEle.clientWidth            width &&(docEle.style.fontSize =20* (width /320) +"px")        }        win.addEventListener(evt, fn,false)    doc.addEventListener("DOMContentLoaded", fn,false)}(document,window))

我要说的是最后一种，也是我认为目前比较好的实现方法：

利用js计算当前设备的DPR，动态设置在html标签上，并动态设置html的font-size，利用css的选择器根据DPR来设置不同DPR下的字体大小（这个方法很不错哦~）

!function(win, lib){vartimer,        doc    = win.document,        docElem = doc.documentElement,        vpMeta  = doc.querySelector('meta[name="viewport"]'),        flexMeta = doc.querySelector('meta[name="flexible"]'),        dpr  =0,        scale =0,        flexible = lib.flexible || (lib.flexible = {})// 设置了 viewport metaif(vpMeta) {console.warn("将根据已有的meta标签来设置缩放比例")varinitial = vpMeta.getAttribute("content").match(/initial\-scale=([\d\.]+)/)if(initial) {            scale =parseFloat(initial[1])// 已设置的 initialScaledpr =parseInt(1/ scale)// 设备像素比 devicePixelRatio}    }// 设置了 flexible Metaelseif(flexMeta) {varflexMetaContent = flexMeta.getAttribute("content")if(flexMetaContent) {varinitial = flexMetaContent.match(/initial\-dpr=([\d\.]+)/),                maximum = flexMetaContent.match(/maximum\-dpr=([\d\.]+)/)if(initial) {                dpr =parseFloat(initial[1])                scale =parseFloat((1/ dpr).toFixed(2))            }if(maximum) {                dpr =parseFloat(maximum[1])                scale =parseFloat((1/ dpr).toFixed(2))            }        }    }// viewport 或 flexible// meta 均未设置if(!dpr &&!scale) {// QST// 这里的 第一句有什么用 ?// 和 Android 有毛关系 ?varu = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)),            _dpr = win.devicePixelRatio// 所以这里似乎是将所有 Android 设备都设置为 1 了dpr = u ? ( (_dpr >=3&&(!dpr || dpr >=3))                        ?3: (_dpr >=2&&(!dpr || dpr >=2))                            ?2:1)                :1        scale =1/ dpr    }    docElem.setAttribute("data-dpr", dpr)// 插入 viewport metaif(!vpMeta) {        vpMeta = doc.createElement("meta")                vpMeta.setAttribute("name","viewport")        vpMeta.setAttribute("content","initial-scale="+ scale +", maximum-scale="+ scale +", minimum-scale="+ scale +", user-scalable=no")if(docElem.firstElementChild) {            docElem.firstElementChild.appendChild(vpMeta)        }else{vardiv = doc.createElement("div")            div.appendChild(vpMeta)            doc.write(div.innerHTML)        }    }functionsetFontSize(){varwinWidth = docElem.getBoundingClientRect().widthif(winWidth / dpr >540) {            (winWidth =540* dpr)        }// 根节点 fontSize 根据宽度决定varbaseSize = winWidth /10        docElem.style.fontSize = baseSize +"px"        flexible.rem = win.rem = baseSize    }// 调整窗口时重置win.addEventListener("resize",function(){        clearTimeout(timer)        timer = setTimeout(setFontSize,300)    },false)// 这一段是我自己加的// orientationchange 时也需要重算下吧win.addEventListener("orientationchange",function(){        clearTimeout(timer)        timer = setTimeout(setFontSize,300)    },false)// pageshow// keyword: 倒退 缓存相关win.addEventListener("pageshow",function(e){if(e.persisted) {            clearTimeout(timer)            timer = setTimeout(setFontSize,300)        }    },false)// 设置基准字体if("complete"=== doc.readyState) {        doc.body.style.fontSize =12* dpr +"px"    }else{        doc.addEventListener("DOMContentLoaded",function(){            doc.body.style.fontSize =12* dpr +"px"        },false)    }      setFontSize()    flexible.dpr = win.dpr = dpr    flexible.refreshRem = setFontSize    flexible.rem2px =function(d){varc =parseFloat(d) *this.remif("string"==typeofd &&d.match(/rem$/)) {            c +="px"        }returnc    }    flexible.px2rem =function(d){varc =parseFloat(d) /this.remif("string"==typeofd &&d.match(/px$/)) {            c +="rem"        }returnc    }}(window,window.lib || (window.lib = {}))

忘了说了，手机淘宝很多页面用的就是这种方法来适配终端的。

需要具备HTML语言 ，Html是超文本标记语言的缩写。Html是网页开发的三大前端剑士之一。主要负责网页的骨架。就像动物的骨架一样，HTML语言是支持网页布局的骨架。CSS， CSS是前端三剑客中的第二名，是层叠样式表的缩写。主要负责网页样式，网页内容如何分配，板块背景，颜色等外观问题，这些都可以通过CSS来控制。 JavaScript 简称JS，是前端三剑客中的第三个，是一种动态脚本语言。在过去，JS只是一种用于网页交互的脚本语言。

1. 随着谷歌V8引擎、angular和reac等前端框架的出现，前端与后端分离的趋势越来越明显，节点也越来越多。JS等技术 发展使得JS在服务器端迸发出非凡的活力，成为目前最活跃的语言之一。 服务器语言 如果您不是专业的后端开发人员，后端开发可能会很困难，学习曲线也很陡峭。但是，仍然建议开发人员学习后端语言。至少他们需要理解通用理由框架和它的代码逻辑。这样既可以实现前端和后端之间的协作，又可以在小程序出现bug时进行争吵。服务器语言有很多，如PHP、Java、Python和ASP。建议开发人员根据公司内部技术的使用情况选择学习。

2. 数据库语言 如果公司的数据量小，架构不复杂，那么数据库语言就相对简单。一般情况下，您可以处理一些常见的命令和常见的问题。公共数据库是免费的 可以应付使用。常用的数据库包括免费的mysql、MSSQL、mongodb、Oracle等数据库。 以上是开发小程序所需的技术知识。如果开发人员只想开发前端页面或后端逻辑，他们可以选择学习上述技术。

3. 合自己的，根据自己的功能需求选择合适的。目前有很多现成的模板可以直接使用，既可以满足要求，又可以节省资金，无需定制开发。这取决于小程序的功能是否丰富。您应该知道创建小程序是第一步。最重要的是利用各种活动来推广和发展你的用户。因此，小程序的营销插件决定了你未来推广的力度。

4. 小程序装饰是否支持自定义装饰。有些小程序装饰风格比较单一，只能根据模板进行装饰。与自定义拖放装饰相比，单调多了。 产品是否成熟稳定，是否经过市场的考验，是否在不断升级。售后服务是否能跟上，一定会遇到一些自己无法解决的问题。您需要技术售后支持。如果服务不能跟上，它只会耽误你的工作进程。价格合理，性价比高。

html铺满整个页面

html铺满整个页面_小程序富文本（HTML+MarkDown），200+种语言代码高亮支持

蓝丨飘

原创

关注

0点赞·164人阅读

介绍

今天为大家带来的是一个用于在微信小程序中渲染html和Markdown的富文本组件，而且支持代码高亮，它就是html2wxml！

Github

https://github.com/qwqoffice/html2wxml

三种版本介绍

插件版本准备

1、打开小程序管理后台，转到设置 - 第三方服务，点击添加插件

2、搜索 html2wxml ，选中并添加

3、添加成功

4、回到小程序开发环境，编辑 app.json ，添加插件声明，最新版为 1.3.0

"plugins": { "htmltowxml": { "version": "1.3.0", "provider": "wxa51b9c855ae38f3c" } }

登录后复制

5、在对应页面的 json 文件，比如首页 index.json，添加使用插件组件的声明

"usingComponents": { "htmltowxml": "plugin://htmltowxml/view" }

登录后复制

组件版本准备

1、复制整个 html2wxml-component 文件夹到小程序目录

2、在对应页面的 json 文件，比如首页 index.json，添加使用组件的声明，注意路径

"usingComponents": { "htmltowxml": "path/to/html2wxml-component/html2wxml" }

登录后复制

模板版本准备

1、复制整个 html2wxml-template 文件夹到小程序目录

2、在对应页面的 js 文件，比如首页 index.js，添加引用声明，并使用html2wxml方法进行数据绑定，注意路径，参数分别为绑定的数据名、已解析的富文本数据、当前页面对象和容器与屏幕边缘的单边的距离

var html2wxml = require('path/to/html2wxml-template/html2wxml.js')html2wxml.html2wxml('article', res.data, this, 5)

登录后复制

3、在对应页面的 wxml 文件，比如首页 index.wxml，添加引用模板的声明，并使用模板，注意路径和绑定的数据名

登录后复制

4、在对应页面的 wxss 文件，比如首页 index.wxss或app.wxss， 引入样式表和你喜欢的代码高亮样式，注意路径

@import "path/to/html2wxml-template/html2wxml.wxss"@import "path/to/html2wxml-template/highlight-styles/darcula.wxss"

登录后复制

组件使用

示例

// 将Page中的content数据作为HTML格式渲染// 禁用代码高亮功能// 禁用代码行号显示功能// 代码高亮样式改为tomorrow// 设置代码高亮检测语言 (最多6个，自行搭建服务不受限制)// 对HTML数据中的img标签的相对路径补全域名// 禁用加载中动画// 将Page中的text数据作为Markdown格式渲染// 直接渲染Page中的已经过解析的obj数据

登录后复制

服务端用法

富文本的解析默认是由QwqOffice完成，存在不稳定因素，你可以自行搭建解析服务或将解析组件引入到你的项目中。

1、复制整个 html2wxml-php 文件夹到项目目录中

2、引入类文件class.ToWXML.php

include( 'path/to/html2wxml-php/class.ToWXML.php' )

登录后复制

3、实例化html2wxml，进行解析并输出，示例：

$towxml = new ToWXML()$json = $towxml->towxml( '

登录后复制

H1标题

', array( 'type' =>'html', 'highlight' =>true, 'linenums' =>true, 'imghost' =>null, 'encode' =>false, 'highlight_languages' =>array( 'html', 'js', 'php', 'css' ) ) )echo json_encode( $json, JSON_UNESCAPED_UNICODE )

可用的代码高亮语言

html铺满整个页面

眼镜店选址

精选推荐

广告

var源码matlab-html2wxml:用于微信小程序HTML和Markdown格式的富文本渲染组件，支持代码高亮

2下载·0评论

2021年5月19日

用于微信小程序的HTML和Markdown格式的富文本渲染组件支持代码高亮

1下载·0评论

2019年8月10日

带格式粘贴至html富文本,防止复制/粘贴将网页样式复制到富文本编辑器

565阅读·0评论·0点赞

2021年6月13日

微信小程序使用html2wxml渲染HTML或Markdown文本

1295阅读·0评论·0点赞

2020年5月16日

html转pdf汉字重叠,富文本编辑器保存的html内容使用itextpdf转PDF文件（css提取，内容重叠）问题解决...

458阅读·0评论·0点赞

2021年6月9日

让小程序支持代码高亮

383阅读·0评论·0点赞

2021年8月13日

高清播放机，图片大全，点击查看详情！

精选推荐

广告

HTML让背景图片铺满整个图片

1.1W阅读·0评论·4点赞

2022年4月25日

不使用插件，小程序也能完整的渲染富文本（视频展现，图片自适应）

1505阅读·3评论·5点赞

2022年3月17日

微信小程序渲染富文本

441阅读·0评论·0点赞

2020年11月10日

小程序渲染富文本内容

5270阅读·0评论·2点赞

2019年1月28日

浏览器中的HTML富文本编辑（一）

480阅读·0评论·0点赞

2013年3月12日

简单封装 wangEditor富文本编辑器，保留大部分粘贴样式

818阅读·0评论·1点赞

2021年12月20日

[贝聊科技]在微信小程序中渲染HTML内容

567阅读·0评论·0点赞

2018年9月14日

微信小程序渲染富文本（html标签）

8058阅读·0评论·5点赞

2019年7月2日

微信小程序Markdonw、HTML富文本内容显示解决办法

1.6W阅读·4评论·2点赞

2017年6月3日

搞定了微信小程序富文本渲染解决方案-后端渲染方案Html2Wxml2J

1162阅读·0评论·1点赞

2018年11月18日

html-to-wxml-小程序中将html内容转化成wxml可以显示的内容，方便用于小程序中显示.zip

2下载·0评论

2019年9月23日

如何让表格（table）充满整个页面

2.5W阅读·6评论·2点赞

2008年7月17日

Towxml是一个可将HTMLMarkdown转为微信小程序WXML的渲染库

4下载·0评论

2019年8月10日

wxParse 微信小程序富文本解析自定义组件，支持HTML及markdown解析

8下载·0评论

2017年9月30日

去首页

看看更多热门内容

---