编写前准备:
流式布局:使用百分比而不是固定像素来确定布局,如width:100%
viewport视觉窗口只存在于移动端,是一个虚拟的容器,介于浏览器和内容之间。它的默认宽度为980px,具有缩放、设置尺寸、是否自行缩放
适配要求:
网页宽度(width)=viewport宽度=浏览器(设备)宽度
视口缩放比1.0且不允许自行缩放(禁止缩放)
在head部分可用<meta name=”viewport”/>
来声明,但是移动端自带viewport
content=width=device-width
initial-scale=1.0
user-scalable=0(0代表否,1代表是)
当该值为0时不用设置最大最小缩放比
快捷方式 meta:vp+tab键
高清屏中会用多个物理像素来表达1px的图,此时图片被放大导致失真
搭建骨架
内包含重置样式reset.css和公用样式common.css
<meta name=”viewport” content=……/>
来声明viewport<link rel="stylesheet" href=" .css">
来声明css<script src=" .js">
来声明js版心容器
顶部搜索框
可以在整体版心容器里,对搜索框再设置一个版心容器
设置了position:fixed后margin:0 auto不起作用
左右两侧的logo和登录框用position:absolute,然后用top:0,left/right:0来放到左右两侧
中间的搜索框(版心容器)设置position:relative,然后用padding-left/right来空出两旁logo和登录框的位置
设置z-index:取大值,使得其不被覆盖
图标失真问题
二倍图方法,用background-size设置为原图尺寸的0.5倍
可用[class^=“icon_”]/[class*=" icon_"]等来将上面的条件运用到所有的icon_中
轮播图
例如轮播图有6张,则设置8个li,顺序为6-1-2…5-6-1
底下灰点设置6个li
导航栏
一行4个,则ul设置width:100%时,li设置25%
注意流式布局的运用和图片失真问题,其余部分和pc端开发大致相同。
改变背景透明度
将十六进制颜色值改成rgba,即在rgb(x,y,z)后加上透明度a,变成rgba(x,y,z,a)
监听页面滚动
var search = document.querySelector('class名');
var banner = document.querySelector('class名');
var height = banner.offsetHeight;
touch事件
是移动端特有的事件
var dom = document.querySelector(‘class名’);
使用这些事件时不能用on(如dom.ontouchStart)因为第二次会产生覆盖,此时应用dom.addEventListener(‘touchstart’,function(){
console.log(‘touchstart’);});便可监听触发次数,同理可延申到touchmove等
本文地址:https://blog.csdn.net/YokiExpert/article/details/107526036
如对本文有疑问, 点击进行留言回复!!
TabLayout + ViewPager实现仿微信左右滑动切换页面功能详解(含TabLayout美化)
STM32WB55 在BLE_HeartRateFreeRTOS例程基础上修改成带rtos的p2ps透传服务
做游戏模型可以用3Dmax,Maya,zbrush,到底哪个更好呢?
Codefroces 1033C. Permutation Game
网友评论