好几个元素都是根据百分比来布局的,由于元素宽度大小不一致,,大屏幕与小屏幕里面切换后的布局可能会出现很多的偏差,(尤其是让他们都水平垂直居中显示时.更难做到一致性.)??
1.把所有小的元素放进较大的元素里面去,小元素再根据大元素定位,保证整体效果的一致性.
貌似又回到了完全自适应的方法了.
2.一个框,里面套个宽度100%的img(撑空间),其余元素与该img并列,然后设置定位absolute相对于那个框定位并相对那个框计算百分比
3.如果需要设置一个最小尺寸。。。可以通过给那个框一个min-width达到整体有个最小尺寸。
4.布局空间的获取
如想要得到土黄色块框里的区域
用一个等比例的较大图片来c空间
如果想要一个正方形的空间,就要一个较大的正方形图片来c空间.(框div宽度设置需要的百分比例,高度的获取:1宽高比得到,2.框直接设置高度百分比)
布局自适应：
1.media查询
2.c法自适应
居中自适应
1.背景居中自适应
（始终取图片中间的部分，舍弃2侧）
1Js ImageAdaptive(".bg1", ".page1_bg");
2.实际尺寸
负边距
百分比下文字居中
字体的相对单位em…
如果太小了(除了谷歌浏览器以外,谷歌始终最小12px)
给其父元素设置一个具体px的大小,字体大小就会相应变大一点
加大后
当前场景的锁定(弹出层弹出时禁止场景滚动)
动画顺序的问题
http://zqtest.tuiyouyou.com/ymfp_mobile/index.html#
透明度由无到有变化
1.注意IE下 style="opacity: 1; filter:alpha(opacity=100);"兼容设置
2.IE下对许多小元素透明度由无到有变化时最好分开对每个分别最显示变化
(请勿偷懒在最外层套一个父元素然后只控制父元素的变化,其他浏览器下是OK的,但IE这个sb理解不了)
改为
http://zqtest.tuiyouyou.com/yunmofang_testimony/index.html#
当c_wrap设置relative了时
当c_wrap没有设置relative时,,,,里面图片计算宽度百分比就按照上面尺寸计算
多个元素的淡入切换fadeIn()
但是当一个元素的图片路径切换也要有淡入效果呢?
先隐藏然后切换路径最后在显示出来.
一个正方形的c图片放到一个div里，当很多这样的div排列到一起有换行时，惊奇的发现，居然这个div没有bei里面的正方形c图片撑出正方形空间，导致上下有4像素间隙。解决方法：该div设置font-size：0；
文字类的图片设置为百分比了。不论拉大还是缩小似乎都会模糊一些
解决方法：1.保持原尺寸，2.图片叠加
百分比高度的一定要设置一个height之后里面内容才能相对顶部定位布局（不然top:xx%无效）
模块宽度自适应(固定尺寸与百分比混合的自适应布局)
ResizeMenuWidth();
$(window).resize(ResizeMenuWidth);
function ResizeMenuWidth() {
var _wWidth = $(window).width();
var _width01 = $(".icon7").width();
var _width02 = $(".btn_prev").width();
var _width03 = $(".btn_next").width();
//alert(_wWidth);
//alert(_width01);
//alert(_width02);
//alert(_width03);
var bWidth = _wWidth - (_width01 + _width02 + _width03);
// alert(bWidth);
$(".btn_box_cont").width(bWidth);
}
Indexof（）> -1检索是否有某些字符串
对应标题的获取
1. dom元素操作方式
2.传参的方式
错误方式(没有传递参数导致识别不了要置换那个----jQuery只会默认为置换第一个)
注意,,定义函数时要有一个obj的参数(形参).调用的时候要把obj换为this(实参)
类比下面一个
点击之后当场景再次返回时给第一个按钮添加一个click事件
试了一下要在OnScenesAfterShow事件以后
添加才有效
并且还有传到线上才能看到效果。。。这里不支持本地加载(存在一个跨域加载js html问题)
比较这两处的布局及效果
1.设计稿对比
2. 做出来的页面效果对比
3. Dom结构对比
4.css对比
结论:
1. rel的div随着百分比的增大宽度确实变大了,在谷歌浏览器的提示中可以看到.(以前以为没变化呢,那是在c法完全自适应的情况下rel增大,每个list也是百分比的跟着相应增大,导致感觉没变化,误认为rel百分比增大后宽度没变化……在非c法时他的布局空间不是靠图片c出来的明显看出变化了.)
2. 自适应的方式不同:c法是在个屏幕中宽高比例不变
注意:当rel的宽度百分比增大时list的宽度百分比要相应减小
这里要设置一个relative
真正内容div才能相对于它获取空间布局
Absolute的居中
1.固定尺寸
负边距的一半
2.百分比尺寸
窗口居中3（relative）
