移动端活动页面搭建

最新推荐文章于 2022-06-09 20:42:37 发布
最新推荐文章于 2022-06-09 20:42:37 发布
阅读量369 收藏
点赞数
原文链接：https://juejin.im/post/5ac441a7f265da23a33570d5
版权

互联网上的自适应方案到底有几种？

  • 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案
  • 使用flexbox解决方案
  • 使用百分比加媒体查询

淘宝 flexible.js

rem是根据html的font-size大小来变化，正是基于这个出发，我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现了自适应布局。

  1. head头部引入flexible.js;
  2. head头部需要写；
  3. 宽度高度用rem。
  4. 字体适配：大字体可以用rem来处理，小的段落字体需要固定为px尺寸,针对于描述性的文本，比如说段落文本。但有的时候文本的字号也需要分场景的，特殊字体或者大号字体完全可以使用rem作为单位。
  5. 完毕

代码

js版本：

//调整-文字大小-用于简单活动页面
(function (doc, win) {
	var docEl = doc.documentElement,
		resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize',
		recalc = function () {
			var clientWidth = docEl.clientWidth;
			if (!clientWidth) return;
			if(clientWidth>=750){
				docEl.style.fontSize = '100px';
			}else{
				docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
			}
		};

	if (!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
复制代码
//调整-文字大小-用于高标准兼容页面
;(function(designWidth, maxWidth) {
	var doc = document,
		win = window;
	var docEl = doc.documentElement;
	var tid;
	var rootItem,rootStyle;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		if (!maxWidth) {
			maxWidth = 540;
		};
		if (width > maxWidth) {
			width = maxWidth;
		}
		//与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
		var rem = width * 100 / designWidth;
		//兼容UC开始
		rootStyle="html{font-size:"+rem+'px !important}';
		rootItem = document.getElementById('rootsize') || document.createElement("style");
		if(!document.getElementById('rootsize')){
		document.getElementsByTagName("head")[0].appendChild(rootItem);
		rootItem.id='rootsize';
		}
		if(rootItem.styleSheet){
		rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
		}else{
		try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
		}
		//兼容UC结束
		docEl.style.fontSize = rem + "px";
	};
	refreshRem();

	win.addEventListener("resize", function() {
		clearTimeout(tid); //防止执行两次
		tid = setTimeout(refreshRem, 300);
	}, false);

	win.addEventListener("pageshow", function(e) {
		if (e.persisted) { // 浏览器后退的时候重新计算
			clearTimeout(tid);
			tid = setTimeout(refreshRem, 300);
		}
	}, false);

	if (doc.readyState === "complete") {
		doc.body.style.fontSize = "16px";
	} else {
		doc.addEventListener("DOMContentLoaded", function(e) {
			doc.body.style.fontSize = "16px";
		}, false);
	}
})(640, 640);
复制代码

flex 均分布局

.wxApp .nav-date.grid{display:flex;}
.wxApp .nav-date.grid span{flex: 1;-webkit-flex: 1;-moz-box-flex: 1;-ms-flex: 1;}
复制代码

sass 打包文件

语法、代码压缩、合并。

压缩1行：sass --style compressed style.scss wxStyle.css

格式化：sass --style compact style.scss wxStyle.css
复制代码

使用媒体查询

@charset "utf-8";

/**
 * iPhone 4/4s landscape & portrait
 */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-device-pixel-ratio: 2)
and (device-aspect-ratio: 2/3) {

}

/**
 * iPhone 4/4s portrait
 */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-device-pixel-ratio: 2)
and (device-aspect-ratio: 2/3)
and (orientation:portrait)  {

}

/**
 * iPhone 4/4s landscape
 */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-device-pixel-ratio: 2)
and (device-aspect-ratio: 2/3)
and (orientation:landscape) {


}

/**
 *  iPhone 5/5s landscape & portrait
 */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {


}

/**
 *  iPhone 5/5s portrait
 */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {

}

/**
 *  iPhone 5/5s landscape
 */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {


}

/**
 *  iPhone 5/5s landscape & portrait
 */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {

}

/**
 *  iPhone 5/5s portrait
 */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {

}

/**
 *  iPhone 5/5s landscape
 */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {

}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 
    //iPhone 6 Portrait
}


@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 
    //iPhone 6 landscape
}


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { 
    //iPhone 6+ Portrait
}


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { 
    //iPhone 6+ landscape
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 
    //iPhone 6 and iPhone 6+ portrait and landscape
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){ 
    //iPhone 6 and iPhone 6+ portrait
}

@media only screen and (max-device-width: 640px), 
only screen and (max-device-width: 667px), 
only screen and (max-width: 480px) 
and (orientation : landscape){ 
    //iPhone 6 and iPhone 6+ landscape
}
/**
 *  Galaxy S3 landscape & portrait
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {

}

/**
 *  Galaxy S3 portrait
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {

}

/**
 *  Galaxy S3 landscape
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {

}

/**
 *  Galaxy S4 landscape & portrait
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {

}

/**
 *  Galaxy S4 portrait
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {

}

/**
 *  Galaxy S4 landscape
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {

}

/**
 *  Galaxy S5 landscape & portrait
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {

}

/**
 *  Galaxy S4 portrait
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {

}

/**
 *  Galaxy S4 landscape
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {

}

/**
 *  HTC One landscape & portrait
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {

}

/**
 *  HTC One portrait
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {

}

/**
 *  HTC One landscape
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {

}


/**
 *  iPad Mini landscape & portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {

}

/**
 *  iPad Mini portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {

}

/**
 *  iPad Mini landscape
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {

}

/**
 *  iPad 1/2 landscape & portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {

}

/**
 *  iPad 1/2 portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {

}

/**
 *  iPad 1/2 landscape
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {

}

/**
 *  iPad 3/4 landscape & portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {

}

/**
 *  iPad 3/4 portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {

}

/**
 *  iPad 3/4 landscape
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {

}

/**
 *  Galaxy Tab 10.1 landscape & portrait
 */
@media
(min-device-width: 800px)
and (max-device-width: 1280px) {

}

/**
 *  Galaxy Tab 10.1 portrait
 */
@media
(max-device-width: 800px)
and (orientation: portrait) {

}

/**
 *  Galaxy Tab 10.1 landscape
 */
@media
(max-device-width: 1280px)
and (orientation: landscape) {

}

/**
 *  Asus Nexus 7 landscape & portrait
 */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332) {

}

/**
 *  Asus Nexus 7 portrait
 */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait) {

}

/**
 *  Asus Nexus 7 landscape
 */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {

}

/**
 *  Kindle Fire HD 7" landscape & portrait
 */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {

}

/**
 *  Kindle Fire HD 7" portrait
 */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}

/**
 *  Kindle Fire HD 7" landscape
 */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {

}

/**
 *  Kindle Fire HD 8.9" landscape & portrait
 */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) {

}

/**
 *  Kindle Fire HD 8.9" portrait
 */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}

/**
 *  Kindle Fire HD 8.9" landscape
 */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {

}

/**
 *  Non-Retina Screens
 */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}

/**
 *  Retina Screens
 */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}

/**
 *  Apple Watch
 */
@media
(max-device-width: 42mm)
and (min-device-width: 38mm) {

}

/**
 *  Moto 360 Watch
 */
@media
(max-device-width: 218px)
and (max-device-height: 281px) {

}
复制代码

转载于:https://juejin.im/post/5ac441a7f265da23a33570d5

weixin_34107739
关注
手机版在线预约功能实现
06-04
用easyui-calendar技术实现，支持手机版在线预约功能，html5支持。支持上下月翻月功能、点击某个日期，支持CSS选中样式，且上下翻页，样式保持不丢失！支持自由选择日期，而非起始连续式的日期！压缩包内有预览效果图，节省大家时间。预约时支持调休不可点模式，样式自定义等，适合大家自己发挥。 里面的EASYUI的官方JS样式因为显示是“月-年”格式的，在代码中稍微有所更改，更改成年月形式，更适合国人习惯。日历表头官方默认的太小，所以用样式表隐藏，重新自己生成了
活动可视化搭建（拖拽生成页面）
zz_jesse的博客
01-13 2889
授权转载自：石头人汉考克，https://juejin.cn/post/6844904083120193543前言公司经常为了活动推广营销，拉新留存，制作临时活动页面，且组件大体相似，为...
京东商城活动页面构建系统——通天塔
热门推荐
勇往直前的专栏
12-01 1万+
田盛：目前就职于京东，主要从事京东商城运营活动搭建平台（通天塔）可视化配置层的架构设计与开发工作。熟悉前端多种开发框架，对大型软件及平台的设计和开发之道有一定的认识，在Web开发，架构优化，工程质量及可持续建设有较丰富的实战经验。目前主要致力于平台的优化及新技术的探索运用等工作。 一、背景 通天塔是京东商城内部提供给运营，用以快速搭建活动页面的平台，自2015年第一版上线以来，已历经多个6...
全套移动端_app_页面-商城-html.zip
12-17
全套移动端_app_页面（商城）htmldemo，免费给大家下载,里面有20多个页面，基本涵盖了所有的购物页面
h5制作移动端专题活动页面可视化编辑
08-10
h5制作，移动端专题活动页面可视化编辑
手机移动端简易投票活动页面html模板
07-14
【标签】"手机移动端简易投票活动页面html"进一步强调了这个模板是面向移动设备的，并且主要依赖HTML技术来构建。HTML（超文本标记语言）是网页设计的基础，它定义了网页的结构和内容。对于移动设备，设计师需要考虑...
基于vue的移动端页面可视化搭建工具
08-10
"基于Vue的移动端页面可视化搭建工具"正是利用了Vue.js的这一特性，为开发者提供了一个便捷的平台，用于快速搭建和预览移动端页面。 在描述中提到的"基于 Vue 的移动端页面可视化搭建工具"，其核心功能可能是让用户...
移动端页面聊天静态模板
01-27
这个“移动端页面聊天静态模板”提供了无框架、纯HTML5实现的解决方案，专为移动设备优化，旨在简化集成到现有应用的过程，尤其适合那些希望对接融云JS API以实现聊天功能的开发者。 首先，让我们深入了解HTML5在...
基于Vue2的移动端开发环境搭建详解
09-01
在本文中，我们将深入探讨如何搭建一个基于Vue2的移动端开发环境。Vue2是一个轻量级的前端框架，因其易学易用、组件化开发、高效性能等特性，在移动端开发中受到广泛欢迎。我们将逐步介绍如何使用vue-cli脚手架工具...
详解H5 活动页之移动端 REM 布局适配方法
09-27
主要介绍了详解H5 活动页之移动端 REM 布局适配方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
响应式网页设计&移动端页面布局
m0_62168050的博客
06-09 410
响应式网页设计&移动端页面布局
移动端 H5 场景应用【破茧成蝶】案例鉴赏
ailusummer的博客
10-10 1711
移动端 H5 场景应用【破茧成蝶】案例鉴赏 移动端【破茧成蝶】场景请用微信扫描二维码访问（温馨提示：H5案例有声音，请打开声音体验）： 案例： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <t
如何进行移动端的页面开发？
懂点君
07-08 2583
移动端的开发是伴随着HTML5的兴起而出现的，2007年第一款iPhone诞生，2009年HTML5这个名词第一次登上“舞台”。当时的移动互联网开始逐渐兴起，发展到今，移动互联网已经和人们的日常生活密切相关。作为开发者，对于一个崭新的事物，一直在尝试的“路上”，本文介绍了从移动端诞生到现在，自己探索到的开发方法，并配以相应知识点，欢迎跟大家沟通、分享。
1-4、搭建页面结构
鸵鸟
09-02 151
2019前端复习笔记
移动端页面布局
sl105105的博客
06-09 357
移动端页面布局
移动端H5解惑-页面适配（二）
weixin_33725807的博客
08-04 2927
本文原文发表于2016年我的github，但是直到现在为止还有很多童鞋问我相关概念，于是整理下再分享一下。 原文链接：github.com/sunmaobin/s… 一、基础概念 在了解如何做H5页面适配前，大家都应该把移动端涉及的一些概念搞明白，比如：dpr 是什么意思？ 移动端H5解惑-概念术语（一） 二、为什么要做页面适配 2.1 PC端为什么要解决浏览器兼容 因为在PC端，由于浏览器种...
移动端开发-体检预约 手机号校验 30秒倒计时 日历展示
m0_46690280的博客
08-30 648
健康项目day81. 体检预约流程2.1 体检预约2.1.1 展示预约的套餐信息2.1.2 手机号校验2.1.3 30秒倒计时效果 1. 体检预约流程 用户可以通过如下操作流程进行体检预约： 1、在移动端首页点击体检预约，页面跳转到套餐列表页面 2、在套餐列表页面点击要预约的套餐，页面跳转到套餐详情页面 3、在套餐详情页面点击立即预约，页面跳转到预约页面 4、在预约页面录入体检人信息，包括手机号，点击发送验证码 5、在预约页面录入收到的手机短信验证码，点击提交预约，完成体检预约 2.1 体检预约 在预约页面
移动端Web页面布局
weixin_42923333的博客
01-23 527
viewport viewport就是浏览器上，用来显示网页的那一部分区域。和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport的宽度。如今的浏览器，都会给自己的本身提供一个viewport的默认值，目前，新版本的手机浏览器，绝大部分是以980px作为默认的viewport值的。这样在我们的手机浏览器中，就会出现横向滚...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值