TZ : 看问题的角度是很重要的,有的擅长多角度被称为聪明,有的人从始至终固执己见被称为死脑筋,一事无成
一 : 科普一分钟
我们熟悉了在PC端进行开发网页,相对于移动设备需要有哪些调整呢,才能设计出符合各个场景和机型的完美移动网页.在众多APP 中大多嵌入H5页面开发,所以解决适配的问题很重要.其实和移动的原生适配想通,网页适配很多也是用到比例或者说是百分比来解决一下棘手问题.但是还有更多的细致技巧,下面一一列举.
二:教你用 python 创建局域网络
首先我们做移动适配,首先咱们要把材料准备全,把网页端做好了,但是我们需要一个载体来解决移动端显示问题.
要想移动端显示我们做的网页下面几种通俗方式,但是只适合有条件的同学
(1).购买空间域名
上传页面到服务器,绑定这个服务器的域名.通过购买服务商的空间和域名.或者通过购买云服务来获取在线服务,如阿里云,新浪云,腾讯云等等
(2)本地测试的话在PC架设IIS或者Apache,借助局域网来实现手机访问.
如果大家觉得还是太麻烦了,那么只能教大家一种30秒搭建局域网的方法了
(3)
因为我的是MAC所以拿来举例,首先打开终端检查一下版本
python --version
然后选择你想共享的文件夹
cd 你想共享的文件夹
为共享文件设置端口
python -m SimpleHTTPServer 9000
最后打开手机输入电脑IP地址进行访问(拿我电脑地址举例)
192.168.10.235:9000
是不是很简单,材料准备好,下面研究一下具体适配问题.
三 : Viewport设置
为了使桌面页面能够在移动端正常显示,移动端浏览器虚拟出了叫viewport的显示窗口,在不同设备中这一显示窗口的大小不同,iOS设备为980像素,windowsPhone的宽度为1024像素.
为了使移动设备能够完整地显示网页,尽可能不出现横向滚动条,viewport往往被浏览器自动加以缩放以适应屏幕宽度,例如将本身虚拟显示980像素宽的页面显示窗口加以缩小,使其显示在320像素的屏幕中.
在移动页面我们可以在<head>中添加meta标签,对viewport专门加以设置.
<meta name = "viewport" content="width=device-width,initial-scale=1.0 user-scalable = no , maximum-scale=1.0">
首先看一下没有上述代码的效果
再看一下有上述代码的效果
分析:设置viewport首先适配了设备的宽度即为窗口的宽度,默认窗口不缩放,以 1:1的比例提供移动页面浏览.用户不可缩放,缩放最大值为1,相当于锁定页面的缩放.避免用户触屏时影响浏览效果,
四 : 百分比布局
和写原生APP的相对布局一样,移动端页面开发很多用到百分比
我们先做一个小页面然后规定它的不同约束 ,首先创建6个标签图片.
<div class="comic">
<img src = "fate.png" alt="Fate">
<h1>Fate</h1>
</div>
<div class="comic">
<img src = "hulk.png" alt="Hulk">
<h1>Hulk</h1>
</div>
<div class="comic">
<img src = "superman.png" alt="Superman">
<h1>Superman</h1>
</div>
<div class="comic">
<img src = "captain.png" alt="Captain">
<h1>Captain</h1>
</div>
<div class="comic">
<img src = "wonder.png" alt="Wonder">
<h1>Wonder</h1>
</div>
<div class="comic">
<img src = "ironman.png" alt="Ironman">
<h1>Ironman</h1>
</div>
页面效果
(1)页面内外间距清零,字体和背景色,并且两列输出
*{
margin:0;
padding:0;
}
body{
background:#f3f2ef;
font-family:Tahoma, Geneva, sans-serif;
}
.comic{
width:50%;
text-align:center;
float:left;
background:#e5e8e1;
box-shadow:0 0 1px rgba(0,0,0,0.2) inset;
padding:30px 0;
margin: 10px 4%;
}
(2)三列
同理只需要改width
.comic{
width:33.33%;
text-align:center;
float:left;
background:#e5e8e1;
box-shadow:0 0 1px rgba(0,0,0,0.2) inset;
padding:30px 0;
margin: 10px 4%;
}
但是图片的大小是不变的当我们缩小到一定程度就会有所挤压,用比例解决图片挤压问题
.comic img{
width:60%;
}
解决文字的自适应问题 vw 和 vh 相对字体大小单位来解决
.comic h1{
color:#666;
font-weight:normal;
font-size:5vw;
}
在 vw 相对体系中,默认将整个viewport的宽度设置为100vw,以此相对换算文字的大小.
(3)想要两列,并且距离上边,左边和右边有等距的距离,这种情况我们要把奇数的右侧margin清零 用 nth-child伪类选择器
.comic:nth-child(even){
margin-left:0;
}
width:44%;
text-align:center;
float:left;
background:#e5e8e1;
box-shadow:0 0 1px rgba(0,0,0,0.2) inset;
margin:10px 4%;
效果图
四 : Flexbox 弹性布局
了解 Flexbox 又成为弹性框布局- Flexible Box Model.在传统的定位方式各种float属性,浮动对于移动来说就是对渲染性能的消耗,在Flexbox提升了移动的效能,我们不必去考虑 marg,padding,width,height这些烦人的东西,一切由Flexbox处理
同样是上面页面 接下来用Flexbox处理
body{
background:#f3f2ef;
font-family:Tahoma, Geneva, sans-serif;
display:-webkit-flex;
display:flex;
-webkit-flex-direction:row;
flex-direction:row;
flex-wrap:wrap;
}
上下排列
body{
-webkit-flex-direction:column;
flex-direction:column;
}
可以去掉所以float marg width
.comic{
text-align:center;
background:#e5e8e1;
box-shadow:0 0 1px rgba(0,0,0,0.2) inset;
padding:30px 0;
}
倒叙显示
body{
-webkit-flex-direction:column-reverse;
flex-direction:column-reverse;
}
横向,同理很简单
body{
-webkit-flex-direction:row;
flex-direction:row;
}
伸缩方式
参数分析 : 参数 1 : flew-grow 决定伸缩元素可扩展空间的分配,1表示每个元素的可扩展控件大小相等;
参数 2 :flew-shrink 决定来定义当元素超过容器的大小后的压缩比例,1 表示每个元素的压缩能力相同
参数 3 : flew-basis 定义伸缩的基准值,auto即自动分配空间.
.comic{
/*已完成代码*/
-webkit-flex:1 1 atuo;
flex:1 1 auto;
}
设置换行属性
body{
flex-direction:row;
flex-wrap:wrap;
}
五:雪碧图
了解:移动网页中不能并行下载,只能串行完成一一下载等操作,因此多张图片的下载时长会很大.为了解决这一问题,我们会用 CSS Sprites 也被称为雪碧图
首先我们利用 Photoshop 来制作一张雪碧图.
还是看代码
<ul>
<li>Weather</li>
<li>Feature</li>
<li>Phone</li>
<li>Notebook</li>
</ul>
预处理
*{
margin:0;
padding::0;
font-family:Tahoma, Geneva, sans-serif;
}
li{
font-size:32px;
color:#565656;
border-bottom::1px solid #ccc;
line-height:120px;
text-indent:130px;
position:relative;
}
接下来通过在每个 li 节点前面插入 before伪元素来作为icon显示容器,在伪元素中,我们将 content属性设置为空,使其不显示内容,并设置宽高.并设置sprite.png 我们制作好的雪碧图 当作背景图片.
li::before{
content:"";
width:96px;
height:100px;
background:url(sprite.png) no-repeat;
position:absolute;
top:18px;
left:12px;
}
效果图
最后通过改变垂直位置完成最终显示
li:nth-child(1)::before{
background-position:0 0;
}
li:nth-child(2)::before{
background-position:0 -100px;
}
li:nth-child(3)::before{
background-position:0 -200px;
}
li:nth-child(4)::before{
background-position:0 -300px;
}
效果图
解析: 通过在垂直方向移动 -100像素,来完成分段显示.
六:移动交互和调试技巧
(1)交互
当手指替换成了鼠标,有了哪些新的交互方法和定义呢.
首先我们写一个控件 class = "submit",这个现在都没问题了应该,跳过此步骤,直接去完成交互代码部分.
为submit 元素注册事件监听 当手指触摸时候触发
submit.addEventListener("touchstart",submitForm);
function submitForm(){
//功能代码
}
在触发 touchstart事件同时也会产生一个event对象,我们可以求出触摸点的个数
submit.addEventListener("gesturestart",editForm);
function submitForm(event){
submit.innerHTML = "触摸点个数为" + event.touches.length;
}
获取触摸点的x ,y 属性, pageX pageY
function submitForm(event){
submit.innerHTML = "触摸点x位置" + event.touches[0].pageX;
}
获取用户正在操作姿势 会不断触发 gesturechange事件
submit.addEventListener("gesturechange",changeForm);
function changeForm(event){
submit.innerHTML = "手指的旋转度为" + event.rotation + ",缩放值"+event.scale;
(2)调试技巧
以iOS为例子,苹果为我们提供了一套有效的移动调试方案, 设置 ->Safari->"高级"
接下来在 iphone 的Safari 访问页面
然后切换到Mac-Safari-开发中,对页面调试,我们可以直接修改调试节点元素,iphone 会做出相应的反应.
有了如此直观的调试工具,制作移动端页面的效率大大提高.
七 : 总结
之所以要进行移动端的适配,就是因为PC和移动两者的分辨率存在明显差别.对于移动端,屏幕尺寸小得多,而桌面页面是横向的,移动端是纵向的.
两者文件的大小尺寸也有不同,太大的页面对于移动流量有很大压力,需要加载时间也很长,因此要尽量精简,进行适配.
两者性能不同,桌面需要更好的渲染,特效,特性,而移动需要的相对要低很多.
两者的交互方式不同,移动是用手指触发事件,而PC是用鼠标键盘来操作.两者的差异还存在于兼容性 等等的各个地方,所以做适配是必要的选择.简单的叙述了移动端H5的适配.
