发表于: 2018-05-31 13:46:28

1 467


1.这段时间主要是踩了一下移动端自适应的坑

  尝试方向有两个一个是JS实现屏幕尺寸自适应

  document.documentElement.style.fontSize = document.documentElement.clientWidth / psd尺寸 + 'px';单位换算1rem=100px;

  这个方法相较于css的方法有很大的优势,代码固定尺寸,相对尺寸随便写,不用担心图片变形等一系列问题。不是说完全不变形,只是相对于css方法变   形不明显。

  同样也存在很大的缺陷:他是整体上的放大缩小整个页面,会导致小屏幕字体看着小,大屏幕很大。

  第二种是font-size:625%.单位换算同上,也是1rem=100px;

  这个方法的优点在于,不管是哪个尺寸看到的字体都是一样的大小。缺点在于对display:flex支持不是很友好。

  问题在于设置了display:flex的元素的子元素都会变成flex,这里可能说的不是很明白,我自己的理解,就是display:flex之后会使其子元素多一个     flex:1的属性。改变了原本display:inline元素的属性,使其高度固定。导致图片变形严重,还没有找到解决方法,所以最好的方法就是在使用font-size:625%的时候尽量避免为横排的图片的父元素添加display:flex,应该使用display:inlin-block或者float进行布局。

2.由于媒体查询控制页面元素多有不便,例如:伪响应式式,PC端写一个导航菜单,手机端再写一个导航菜单时候,控制display显示隐藏。

  当然可能是css选择器没过关等原因造成的多有不便- -。

  使用js的方式解决

function screen(){

if(window.screen.width<某品目尺寸){

 .....

}

else if(window.screen.width<某品目尺寸){

....

}

else{

....

}

}

sreen();

当然这样是不行的,自己在PC端试的时候挺麻烦,就到jq找了个屏幕尺寸变化的事件

$(window).resize(function(){

sreen();

});

这样就算完美了。

另外学习了一些text-transform:uppercase;text-transform:lowercase;text-transform:capitalize;文字强制换行word-wrap:nowrap等基础属性。

明天计划的事:PC端自适应的方式,自适应可以出现滚动条吗,等基础问题。

已经完成的事:冬虫夏草网页及任务三。

  

 


返回列表 返回列表
评论

    分享到