当前位置:主页 > 网站优化 >

从事前端的你,网页的缩放,适配以及移动的适配你懂多少?…

作者: 奕星SEO 分类: 网站优化 发布时间: 2019-08-16 13:50 内容来源:网络整理阅读量:

从布局出发:宽度自适应,常用百分比的方式。由于父级元素采用百分比的布局方式,随着屏幕的拉伸,它的宽度会无限的拉伸。而子元素由于采用了浮动,那么它们的位置也会固定在两端。该宽度自适应在新的时代有了新的方法,随着弹性布局的普及,它经常被flex或者box这样的伸缩性布局方式替代。

1.rem

rem属性指的是相对于根元素设置某个元素的字体大小。它同时也可以用作为设置高度等一系列可以用px来标注的单位。        浏览器的默认字体高度一般为16px,即1em:16px,但是 1:16 的比例不方便计算,为了使单位em/rem更直观,CSS编写者常常将页面跟节点字体设为62.5%,比如选择用rem控制字体时,先需要设置根节点html的字体大小,因为浏览器默认字体大小16px*62.5%=10px。

html { font-size: 10px; } div { font-size: 1rem; height: 2rem; width: 3rem; border:.1rem solid #000; }

采用以上写法,div继承到了html节点的font-size,为本身定义了一系列样式属性,此时1em计算为10px,即根节点的font-size值。所以,这时div的高度就是20px,宽度是30px,边框是1px,字体大小则是10px;一旦有了这样的方法,我们自然可以根据不同的屏幕宽度设置不同的根节点字体大小。假设我们现在设计的标准是iphone5s,iphone5系列的屏幕分辨率是640。为了统一规范,我们将iphone5 分辨率下的根元素font-size设置为100px;

html { font-size: 100px; } /* 数据计算公式 640/100 = device-width / x 可以设置其他设备根元素字体大小 ihone5: 640 : 100 iphone6: 750 : 117 iphone6s: 1240 : 194*/ var deviceWidth = window.documentElement.clientWidth; document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';


        接下来我们可以根据根元素的字体大小用rem设置各种属性的相对值。当然,如果是移动设备,屏幕会有一个上下限制,我们可以控制分辨率在某个范围内,超过了该范围,我们就不再增加根元素的字体大小了.

一般的情况下,你是不需要考虑屏幕动态地拉伸和收缩。当然,假如用户开启了转屏设置,在网页加载之后改变了屏幕的宽度,那么我们就要考虑这个问题了。解决此问题也很简单,监听屏幕的变化就可以做到动态切换元素样式。

var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth; document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px'; window.onresize = function(){ var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth; document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px'; }; //为了提高性能,让代码开起来更加完美,可以为它加上节流阀函数: (function() { var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth; document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px'; }, 50);

2.css–media query(媒体查询)

运用css新属性media query 特性也可以实现我们上说到过的布局样式。为尺寸设置根元素字体大小,但灵活性不高,取每个设备的精确值需要自己去计算,所以只能取范围值。考虑设备屏幕众多,分辨率也参差不齐,把每一种机型的css代码写出来是不太可能的。

常用于pc端的适配,比如常见的1024,1366等分辨率。此种自适应布局一般常用在兼容PC和手机设备,由于屏幕跨度很大,界面的元素以及远远不是改改大小所能满足的。这时候需要重新设计整界面的布局和排版了,与rem相比,最明显的特点是直接可以改变布局。

许多css框架经常用到这样的多端解决方案,著名的bootstrap就是采用此种方式进行栅格布局的。

@media screen and (device-width: 640px) { /iphone4/iphon5/ html { font-size: 100px; } } @media screen and (device-width: 750px) { /iphone6/ html { font-size: 117.188px; } } @media screen and (device-width: 1240px) { /iphone6s/ html { font-size: 194.063px; } }

小结

1.如果只做pc端,那么静态布局(定宽度)是最好的选择;
2.如果做移动端,且设计对高度和元素间距要求不高,那么弹性布局(rem+js)是最好的选择,一份css+一份js调节font-size搞定;
3.如果pc,移动要兼容,而且要求很高那么响应式布局还是最好的选择,前提是设计根据不同的高宽做不同的设计,响应式根据媒体查询做不同的布局。

场景1:1920的设计稿,需要在1024,1366等等主流分辨率下适配(采用网页等比例缩放)

常见的缩放有zoom和transform:scale两种,两者都具备缩放的功能,他们的区别如下

1.zoom支持的值类型有:


本文链接地址:http://www.seohuizhou.com/webyouhua/1512.html
上一篇:<<2019年最新传智播客黑马WEB前端39期全套 毕业时间2018年12月
下一篇:为了提升技术一定要学会使用这两个在线网站!>>