常用日语单词【笔记】h5活动页制作流程总结
interrelationship
在公司制作的活动页通常包括各种测评活动，宣传单页，报名，信息收集等等，对接后端接⼝的需求较少，内容简单，难点主要在于⾃适应⽅案的选择和不同系统的兼容问题，下⾯⼤体梳理⼀下制作⼀个活动页需要考虑的⼏个⽅⾯。
英语等级考试网
1. 布局：艳慕是什么意思
形象设计师培训通常活动页简单的⽤div区分不同的页⾯，再分情况展⽰即可，我的常⽤⽅法是，给每个页⾯⼀个<div class=“page”>，拿它当每⼀页的body，再在⾥⾯放⼀个<div class=“container”>作为页⾯的内容区域，page设置固定定位在0,0处，且默认visibility: hidden，通过给每页加current类名来修改可见性（⽤visibility⽽不是display，因为⽤display的话所需要的数据不会加载，影响体验（它不在⽂档流⾥），⽽visibility标签，数据可以提前加载好，不会切换页⾯才加载图⽚，此外，不⽤透明度是因为透明度的div也会触发事件，切换到新的页⾯了，我们肯定不会希望上⼀个页⾯还在影响事件触发）。container就按照平时在body内正常布局即可。
perpendicular
这⾥注意⼀点，拿到的psd设计稿⾥⾯可能设计师会给加两根⽔平，两根垂直的辅助线，这个线就是定义的每⼀页的内容区域，即container的位置和⼤⼩，⽽后⾯的背景图，其实是page的背景，这⾥要注意下，有时候属于“潜规则”，产品或者设计不会直接告诉你，但⾃⼰要懂。
vocabulary
2. ⾃适应：
2.1 rem⽅案
因为h5不识别rpx，所以要⽤rem来做⾃适应，并⽤js根据设备宽度调整根元素的font-size，举个例⼦，⼀般设计稿都是750像素宽，⽐如⾥⾯有个按钮是100像素宽，50像素⾼，为了⽅便计算，定义1rem=100像素，即⽤js给html加上font-size=100px（设备宽750px时），那么按钮的宽是1rem，⾼是0.5rem，这样把在ps⾥量出来的像素，除以100后⽤rem作为单位即可。如果设备宽360px，那就要按⽐例修改html的font-size，360/750 = x/100，求出x就是正确的font-size，⾥⾯的rem还是该咋写咋写。
2.2 viewpoint⽅案
上⾯这种⽅法是可以的，但有个问题是⽐较⿇烦，还要换算，因此可以使⽤viewpoint元标签来修改页⾯布局视⼝width为设计稿宽度，并设置禁⽌缩放，这样⾥⾯全部统⼀使⽤px作为单位即可，设置viewpoint的width后，初始的布局视⼝和视觉视⼝都是这个设定的值，刚好根设计图⼀样宽（如果设计图是750的话），如果使⽤这个⽅案，要记得给每个page写好宽度为750（设计稿宽度），不然在pc下，由于viewpoint失效，布局视⼝就不是固定的750了，内部div不设宽度的话，就会跟着浏览器可视区域宽度⾛。
综上，viewpoint是较新，也较为简单的解决⽅案，只要记得给外部div设置好宽度即可，最好再加个居中⽅便pc查看。
3. 响应式：
服装分类
⼀般响应式都是pc的需求，毕竟移动端⼀般也不太会遇到频繁改浏览器尺⼨的情况，如果需要页⾯整体也跟着缩放，那就js监控窗⼝变化事件并修改根元素字号+rem做单位即可，不要⽤px单位然后修改page宽度，因为这样移动端下可能会出滚动条（因为写死了布局视⼝），如果仅仅是页⾯布局的响应式，flex⾜矣应对了。
4. 常⽤库：克龙
⼀般活动页⽤不到框架，通常jQuery⾜以满⾜需求，此外主要⽤到animate和swiper这两个库⽐较多，且⼤部分需求这俩库都可以满⾜，诸如页⾯的切换特效可以⽤swiper来做，页⾯内的⼩动画可以⽤animate，如果是⼀些由设计稿指定的效果，则建议优先考虑css3来实现，⽽不是canvas（因为canvas制作起来相对复杂，⽽⼀个活动页通常只给⼏天到⼀周开发时间，还要预留出修改时间）。
2019数学5. 切图：
切成750px宽度的就⾏，省的div还得写宽度再居中⿇⿇烦烦的，不过也看个⼈爱好了，毕竟切图也挺
简单就不多扯了。
6. 测试：
⾕歌浏览器可以扫码到⼿机上测试，多试试ios和安卓的兼容，这个最重要，其次就是f12下调成各种⼤⼩试试⾃适应，测好再交，省的来回返⼯。
