lovedayu - 博客园

2018年10月14日

摘要：效果预览：http://www.csmlody.com/fxyg/mobile_lun/ 轮播原理（电脑端轮播同理）： <!doctype html> <html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" cont 阅读全文

posted @ 2018-10-14 23:16 lovedayu 阅读(351) 评论(0) 推荐(0) 编辑

2018年10月4日

移动端事件（2）——事件对象

摘要：当给某个元素加上了事件绑定函数之后，事件函数默认的第一个参数就是事件对象。事件对象：当用户在浏览器下触发了某个行为，事件对象会记录用户操作时一些细节信息 touches 当前位于*屏幕*上的所有手指的一个列表 targetTouches 位于当前DOM元素上的手指的一个列表 changedTou 阅读全文

posted @ 2018-10-04 21:47 lovedayu 阅读(245) 评论(0) 推荐(0) 编辑

移动端事件（1）

摘要：移动端的三大事件：手指按下: touchstart 手指移动: touchmove 手指抬起 touchend 移动端点透问题的发生： <meta name="viewport" content="width=device-width,user-scalable=no"/> <style> #di 阅读全文

posted @ 2018-10-04 18:19 lovedayu 阅读(236) 评论(0) 推荐(0) 编辑

2018年10月3日

响应式(2)——bootstrap的响应式

摘要： <meta name="viewport" content="width=device-width,user-scalable=no"/> <href="bs/css/bootstrap.min.css"/> <!-- HTML5 shim and Respond.js for IE8 suppor 阅读全文

posted @ 2018-10-03 01:06 lovedayu 阅读(340) 评论(0) 推荐(0) 编辑

2018年10月2日

响应式（1）

摘要：响应式：适应不同的终端，在不同的终端有较好的显示效果媒体类型： all 所有媒体 braille 盲文触觉设备 embossed 盲文打印机 print 手持设备 projection 打印预览 screen 彩屏设备 speech "听觉"类似的媒体类型 tty 不适用像素的设备 tv 电视 @ 阅读全文

posted @ 2018-10-02 22:43 lovedayu 阅读(265) 评论(0) 推荐(0) 编辑

弹性盒模型--新版与旧版比较（2）

摘要：弹性空间与元素具体位置设置是加在子元素身上的 <style> body{ margin: 0; } #box{ height: 300px; border: 1px solid #000; 新版弹性盒模型 /*display: flex;*/ 老版弹性盒模型 display: -webkit-box 阅读全文

posted @ 2018-10-02 20:09 lovedayu 阅读(292) 评论(0) 推荐(0) 编辑

弹性盒模型--新版与旧版比较（1）

摘要： <style> body{ margin:0; } #box{ height:200px; border:1px solid #000; 新版弹性盒模型 /*display:flex;*/ /*flex-direction:row;*/ 设置主轴方向为水平方向 /*flex-direction:co 阅读全文

posted @ 2018-10-02 01:12 lovedayu 阅读(284) 评论(0) 推荐(0) 编辑

2018年10月1日

移动端布局注意事项与less

摘要：用Koala实现less的实时编译 1、下载Koala（Koala可以实现实时编译） 2、把CSS文件夹（如index.css，index.less）拖到Koala中 3、点击到需要编译的index.css，如： 4、点击Compile即可实现实时编译。Koala会在底部最小化运行。移动端初始化C 阅读全文

posted @ 2018-10-01 01:56 lovedayu 阅读(326) 评论(0) 推荐(0) 编辑

2018年9月29日

移动端适配（3）——rem适配

摘要： rem适配 <meta name="viewport" content="width=device-width,user-scalable=no"/> <script> (function(){ var html=document.documentElement; var hWidth=html.g 阅读全文

posted @ 2018-09-29 00:08 lovedayu 阅读(290) 评论(0) 推荐(0) 编辑

2018年9月28日

移动端适配（2）——viewport适配

摘要：通过viewport来适配 <script> (function(){ var w=window.screen.width; console.log(w);//获取屏幕尺寸 var targetW=320;//之后所有的都是按照320来做 var scale=w/targetW;//缩放值:当前尺寸阅读全文

posted @ 2018-09-28 04:10 lovedayu 阅读(292) 评论(0) 推荐(1) 编辑