Web引领者 - 博客园

2019年5月9日

摘要：流式布局（100%布局）（可能：做的页面不是很美观）效果与弹性布局一样不设置宽高：表示宽 auto 最外层：保证100% 等比例缩放的算法： 320/10 已知的一个比例 = 已知的宽/x x就是想得到的值；弹性/流式，布局比较容易，但是里面的内容显示的比例，在不同设备下会有偏差； rem布局：阅读全文

posted @ 2019-05-09 16:49 Web引领者阅读(517) 评论(0) 推荐(0)

移动端rem布局屏幕适配插件（放js中便可使用）

摘要： /* doc:不用管：document对象 win:不用管：window对象 design:注意：设计稿的尺寸/物理像素*/ (function (doc, win,design) {// alert(123) var docEl = doc.documentElement, resizeEvt = 阅读全文

posted @ 2019-05-09 10:55 Web引领者阅读(1932) 评论(0) 推荐(0)

2019年5月8日

微信小程序的开发框架

摘要： wxss：是一套样式语言，用来描述wxml的组件样式；小程序在css基础上做的修改和扩充的版本 css：是一套样式语言，样式表，用来描述xml和html文件样式的呈现；设备像素：是图片在设备上显示的小点，这些是固定不变的 css像素：逻辑像素，是我们一套标准来显示屏幕的宽 ppi：独立设备显示的密阅读全文

posted @ 2019-05-08 21:32 Web引领者阅读(3638) 评论(0) 推荐(0)

Dpr ppi 适配等概念弹性属性的讲解

摘要： Dpr： Dpr的全称（Device pixel ratio）像素设备比例：就是说每个设备像素上占有的css位像素的个数苹果手机常见的设备像素比：1.0安卓 iPhone2.0 3.0 如果是1.0 设计稿的宽度是多少，我们就写多少，如果是2.0 我们所写的宽高，字体，等等都要是设计稿的一半（为了阅读全文

posted @ 2019-05-08 17:47 Web引领者阅读(664) 评论(0) 推荐(0)

2019年5月7日

小程序开发的共同属性

摘要：小程序开发的共同属性； id 属性值：字符串功能：组件的唯一标识作用：保证页面的唯一 class 属性值：字符串功能：组件的样式类作用：对应wxss定义的样式类 style 属性值：字符串功能：组件的内联样式作用：可以动态的设置内联样式 hidden 属性值：布尔功能：组件是否显示作阅读全文

posted @ 2019-05-07 21:02 Web引领者阅读(449) 评论(0) 推荐(0)

小程序的数据绑定

摘要：所有组件的属性都是小写 rpx与px的一个区别：rpx是响应式的屏幕像素来自页面的js文件中的 Page()方法中的 data对象页面的数据要用 mustache 语法变量名加双{}包起来这种语法的强悍之处在于，可以在页面的各个角落都可以传数据，而且还能直接在页面中解析出数据，运算等等。。阅读全文

posted @ 2019-05-07 20:52 Web引领者阅读(227) 评论(0) 推荐(0)

小程序的基本目录结构

摘要：一个小程序的基本目录结构：全局文件的配置：根目录下 app.js：注册小程序的应用里面有一个App()的函数参数是一个对象 project.config.json：小程序的个性化设置，对应的独立的小程序 app.json：各个页面的注册路径是一个对象格式里面以键值对形式书写 pages属性阅读全文

posted @ 2019-05-07 20:31 Web引领者阅读(1909) 评论(0) 推荐(0)

移动式布局

摘要：移动式布局 1.移动设备：手机和iPad 系统分：安卓系统和iOS系统安卓系统内置浏览器是谷歌，ios内置safari浏览器，他们的内核都是webkit，不需要考虑兼容性，但安卓和iOS系统还是有区别的； 2.布局（写页面）所考虑的东西设备宽度：就是设备实际大小，设备分辨率，就是手机屏幕；页面阅读全文

posted @ 2019-05-07 17:19 Web引领者阅读(187) 评论(0) 推荐(0)

如何让移动设备的宽与浏览器视图的宽保持一致

摘要：使用meta标签在head标签里面加上这一句； <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" 阅读全文

posted @ 2019-05-07 16:09 Web引领者阅读(198) 评论(0) 推荐(0)

css3爆炸轮播效果

摘要： <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>爆炸效果轮播</title> <style> *{ margin:0; padding:0; } ul,ol{ list-style:none; } .sli 阅读全文

posted @ 2019-05-07 16:00 Web引领者阅读(249) 评论(0) 推荐(0)