移动端
关注
分享
扫一扫
文章平均质量分 68
lelara
这个作者很懒，什么都没留下…
展开
-
第148天：js+rem动态计算font-size的大小，适配各种手机设备
需求：在不同的移动终端设备中实现，UI设计稿的等比例适配。方案：布局排版都用REM做单位，然后不同宽度的屏，JS动态计算根节点的字体大小。假设设计稿是宽750px来做的，书写的CSS方便计算考虑，根节点的字体大小假定为100像素，得出设备宽为7.5rem。设计稿中标注的任何像素数值都可以换算成PX / 100的REM值。就是说，每一个设备的宽度都定为7.5个REM，然后宽度非7...原创 2018-01-17 23:02:00 · 547 阅读 · 0 评论 -
第119天：移动端：CSS像素、屏幕像素和视口的关系
移动前端中常说的viewport（视口）就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是dip （与设备无关的像素设备逻辑像素）和CSS 像素之间的关系。这里首先了解以下几个概念。一，视口1，layout viewport（布局视口） 一般移动设备的浏览器都默认设置了一个视口 元标签，定义一个虚拟的布局视口（布局视口），用于解决早期的页面在手机上显示的问题.iOS，Andro...原创 2017-12-19 23:05:00 · 633 阅读 · 0 评论 -
第124天：移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用>对于Bootstrap的JS插件，我们只需要将文档实例中的代码粘到我们自己的代码中>然后作出相应的样式调整引导中轮播图插件叫作旋转木马一，基本的轮播图实现HTML代码 1 <!-- 2 以下容器就是整个轮播图组件的整体， 3 注意该盒子必须加上 class="carousel slide" data-ride=...原创 2017-12-24 23:01:00 · 249 阅读 · 0 评论 -
第123天：移动web开发中的常见问题
一，函数库强调JS_.template：<ol class="carousel-indicators"> <!--渲染的HTML字符串--></ol><div class="carousel-inner" role="listbox"> <!--渲染的HTML字符串--><原创 2017-12-23 22:22:00 · 129 阅读 · 0 评论 -
第122天：移动端开发常见事件和流式布局
一，流式布局1，什么是流式布局式流就是布局百分比布局，盒子通过的宽度设置分类中翻译百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充，会同时设定最小宽度状语从句：最大宽度，适用于图片比较的多首页，门户，商电等。在这里我们以京东的中号站为例进行说明：可以看到，在京东各个模块的主容器中，都设置了最大最小宽度和宽度为100％，而在导航区块中，由于一行有5...原创 2017-12-22 23:20:00 · 154 阅读 · 0 评论 -
第121天：移动端开发基本知识
1，HTML5文档结构注意lang =“ zh-CN ”表示网页为中文，如果是英文则为lang =“ en-CN ”。 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>页面标题&l原创 2017-12-21 22:47:00 · 106 阅读 · 0 评论 -
第120天：移动端-Bootstrap基本使用方法
一、Bootstrap使用1、搭建Bootstrap页面骨架及项目目录结构``` ├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ······················· 我们自己的CSS文件 ├─ /font/ ······················ 使用到的字体文件 ├─ /img/ ········...原创 2017-12-20 23:10:00 · 406 阅读 · 0 评论 -
第125天：移动端-空白字符问题解决办法
如图1所示，当我们想使用百分比来进行两个盒子的并排代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 html, 7 body { 8 margin:原创 2017-12-25 23:02:00 · 142 阅读 · 0 评论 -
第126天：移动端-原生实现响应式模态框
下面采用HTML + CSS + JavaScript的实现模态框，并采用Flex的布局和多媒体查询实现响应式。一，模态框HTML代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title&原创 2017-12-26 23:01:00 · 392 阅读 · 0 评论 -
第130天：移动端-rem布局
一、关于布局方案当拿到设计师给的UI设计图，前端的首要任务就是布局和样式，相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单，关键在于对不同设备的适配。之前介绍了一篇关于移动端rem布局方案，这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用。网易云的方案总结为：根据屏幕大小 / 750 = 所求字体 / 基准字体大小比值相等...原创 2017-12-30 23:05:00 · 207 阅读 · 0 评论 -
第131天：移动web页面的排版与布局
一，总之一句话，尽量用mm毫米作为标准单位。采用新的相对单位REM首先设置HTML的字体大小为根大小。 html { font-size：1mm ; } .titleheight { height：10rem; //这里等于10mm 宽度：11rem; //这里等于11mm }当 html { font-size：2mm ; }.titleheight { 身高：1...原创 2017-12-31 23:45:00 · 585 阅读 · 0 评论 -
第132天：移动web端-rem布局（进阶）
REM布局（进阶版） 该方案使用相当简单，把下面这段已压缩过的原生JS（仅1kb，源码已在文章底部更新，2017/5/3）放到HTML的头标签中即可（注：不要手动设置viewport，该方案自动帮你设置），此方案仅适用于移动端网络<script>!function(e){function t(a){if(i[a])return i[a].exports;var...原创 2018-01-01 23:01:00 · 205 阅读 · 0 评论 -
第134天：移动web开发的一些总结（二）
如图1所示，响应式布局开发一个页面，在所有的设备上都能够完美展示。媒体查询：@media screen and（max-width：100px）{}媒体类型：屏幕（屏幕）print（打印机）handheld（手持设备）all（通用）常用媒体查询参数：宽度 -视口宽高高度 -视口宽高设备宽度 -设备的宽高装置-高度 -设备的宽高取向：检查设备处于横向（横向）还是竖屏（人像）...原创 2018-01-03 22:23:00 · 114 阅读 · 0 评论 -
第137天：移动端-仿京东秒杀倒计时
京东秒杀倒计时1，HTML 1 <div class="jd_secKill_left"> 2 <span class="ms_icon"></span> 3 <h4 class="ms_name fl">掌上秒杀</h4> 4 <div class=&qu原创 2018-01-06 22:28:00 · 746 阅读 · 0 评论 -
第146天：移动H5前端性能优化
移动H5前端性能优化一，概述1. PC优化手段在Mobile侧同样适用2.在Mobile侧我们提出三秒种渲染完成首屏指标3.基于第二点，首屏加载3秒完成或使用Loading4.基于联通3G网络平均338KB / s（2.71Mb / s），所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因，除加载外部染速度也是优化重点6.基于第五点，要合理处理代码减少渲...原创 2018-01-15 22:38:00 · 122 阅读 · 0 评论 -
第118天：移动端开发——视口
。移动端视口的分类说明在开始之前，先看一个典型的例子：1 <meta name="viewport" content="width=device-width,initial-scale=1">2 @media screen and (max-width:480px){3 //宽度不超过480px时的样式 4 }上述代码相信大家在做移动端开发时经常去书写它研...原创 2017-12-18 23:11:00 · 128 阅读 · 0 评论