当前位置:主页 > 查看内容

总结个人使用过的移动端布局方法福州新房网

发布时间:2019-03-24 13:57| 有133位朋友查看

简介:这篇文章,主要是总结一下,我在移动端布局用过的方法。有三种,一种是响应式布局,利用@meida判断各个size;第二种是REM;最后是设置viewport中的width。响应式布局这种感觉是最好理解了……

  这篇文章,主要是总结一下,我在移动端布局用过的方法。有三种,一种是响应式布局,利用@meida判断各个size;第二种是REM;最后是设置viewport中的width。

  响应式布局

  这种感觉是最好理解了,利用@media进行断点,在每个断点中编写css。

  @media (max-width:768px){ //css }

  上面这段代码,在浏览器的宽度低于768时有效。同理,如果把max换成min,就会变成高于768时有效。可以设置宽度,也可以设置高度,也可以同时设置多个值。

  在MDN,@media上,发现很多值都可以做判断的。宽,高,宽高比,颜色(这个是指定输出设备每个像素单位的比特值),是否横屏或竖屏,还有很多,可以去MDN看看。

  媒体类型

  @meida还可以根据媒体类型进行断点。

  all,所有设备 print,打印 screen,彩色的电脑屏幕 speech,不知道什么来的。

  关键字

  @media (max-width:1000px){ div{background:blue;} } @media (min-width:1000px) and (max-width:1150px){ div{background: yellow;} } @media only screen and (max-width:1150px){ div{border:solid 1px;} } @media not print and (max-width:1150px){ div{border-radius:50%;} } and,就是‘和’的意思,前后两个条件都达到时 only,唯一 not,除了这个之外

  上面4个@media,分别的效果是:

  当浏览器宽度低于1000px时 当浏览器宽度大于1000px 和 小于1150px时 当在屏幕上显示 和 宽度小于1150px时 除了在打印上显示外 和 宽度小于1150px时

  按需‘加载’css

  @media还可以用在link标签上。

  

  当浏览器宽度低于500px时,1.css的样式才会有效果。但这不代表大于500px时,就没加载了1.css。使用了@media属性后,只会让你当条件符合了,才让对应的css文件有效果。而且用这种方式有一个好处,就是不用在css里写@media。

  

  平常响应式网站的开发

  平时响应式网站的开发,我都会先对比PC和MOBILE的设计稿,看看有什么区别,然后才进行编写css。通常都是使用flex。宽度尽量用百分比,间距、高度、字体大小使用 em,就可以很方便的进行大小的控制。

  REM

  REM这个单位,会根据html的font-size大小进行转换。

  html{font-size:100px;} p{padding-top:.5rem;}

  转换后p的padding-top就是50px了。只要我们进行适当的计算,当前屏幕的宽度,html的font-size是多少px就OK了。

  如何计算当前html的font-size值

  比如,我们拿到的设计稿是750px,那就设置成当屏幕宽度是750的时候,html的font-size就是100px(当然这个100px你可以随意设置的,我设置成100px只是方便我计算),然后就根据当前屏幕的宽度 / 750 * 100,就得到了当前屏幕宽度的font-size值。

  //当前屏幕宽度 / 750 = 当前屏幕宽度的font-size / 100 //代码如下 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);

  上面这段代码,是直接根据屏幕宽度进行计算font-size的。而淘宝移动端REM方案,还根据你的dpr去计算,而且会进行整体的缩放。淘宝的这种方案,比上面的代码会好很多。

  

  

  大家注意边框的大小。第二张图的边框是比第一张图的小的,两个都是border:solid 1px。其他的边距都是一样。淘宝的方案,解决了另一个问题:边框1px的问题。

  大家可以打开以下链接,看看具体的效果:

  第一种方案(http://www.rni-l.com/mobile/index2.html)

  第二种方案(http://www.rni-l.com/mobile/index.html)

  淘宝移动端REM

  这个很简单,只需要加载js就好了

  总结个人使用过的移动端布局方法福州新房网