移动端页面布局_怎么让网页端到移动端的布局不会乱 - CSDN
精华内容
参与话题
  • 前言的一些碎碎念:最近一直在写移动端页面,不过一直是用的别人造好的轮子,很多时候并没有想那是为什么,那是怎么样要那么写,就跟着别人的文档去了。本以为自己对移动端的那一丢丢理解,结果很多东西都特么有...

    前言的一些碎碎念:最近一直在写移动端的页面,不过一直是用的别人造好的轮子,很多时候并没有想那是为什么,那是怎么样要那么写,就跟着别人的文档去了。本以为自己对移动端的那一丢丢理解,结果很多东西都特么有问题,所以,今天停下了手中的一些东西,来谈下移动端的布局方案吧

    内容有些长,这也是我第一次写博客,不足之处还请严厉指出

    一. viewport

    1. 什么是viewport

      简单来讲,viewport就是浏览器上,用来显示网页的那一部分区域了,也就是说,浏览器的实际宽度,是和我们手机的宽度不一样的,无论你的手机宽度是320px,还是640px,在手机浏览器内部的宽度,始终会是浏览器本身的viewport。如今的浏览器,都会给自己的本身提供一个viewport的默认值,可能是980px,或者是其他值。就以手机来说吧,目前,新版本的手机浏览器,绝大部分是以980px作为默认的viewport值的。我这里对新版本的不同平台下的浏览器做了测试,经过测试,iphone下的默认viewport为980px,安卓下的浏览器,目前主流的最新浏览器(比如chrome,还有很多国产的像qq,uc)的viewport也是980px了。

    2. viewport是用来干什么的

      viewport的默认值,一般来说是大于手机屏幕的。这样就可以做到当我们在浏览桌面端网页的时候,可以让桌面端端网页正常显示(我们普通页面设计的时候,一般页面的主区域是以960px来做的,所以980px这个值,可以做到桌面端网页的正常显示)。但是,其实我们手机的屏幕宽度是没有960px的,因此浏览器会出现横向滚动条。同时,即使是基于980的viewport,我们在移动端浏览我们的桌面页面的体验其实也并不好,所以,一般的,我们会专门给浏览器设计一个移动端的页面。

    3. 对viewport的控制

      如今可以绝大部分浏览器里(即主流的安卓浏览器和ios),都支持对viewport的一个控制了。一般的,我们会这么写。

      viewport默认有6个属性

      • width: 设置viewport的宽度(即之前所提及到的,浏览器的宽度详),这里可以为一个整数,又或者是字符串"width-device"
      • initial-scale: 页面初始的缩放值,为数字,可以是小数
      • minimum-scale: 允许用户的最小缩放值,为数字,可以是小数
      • maximum-scale: 允许用户的最大缩放值,为数字,可以是小数
      • height: 设置viewport的高度(我们一般而言并不能用到)
      • user-scalable: 是否允许用户进行缩放,'no'为不允许,'yes'为允许

      我们把这个标签是在head里面,像这样

      <meta name="viewport" content="initial-scale=1">

      这样就可以做到对viewport的控制了

    二. 关于我们的设备

    1. 三个需要了解的概念:

      • PPI: 可以理解为屏幕的显示密度
      • DPR: 设备物理像素和逻辑像素的对应关系,即物理像素/逻辑像素
      • Resolution: 就是我们常说的分辨率
    2. 物理像素与逻辑像素

      看了我们上面内容一的第一点之后,或许有些人会有些疑问,我的安卓手机,或者iphone6plus(目前应该仅限于这一款机型吧),买回来的是1920x1080的或者其他更高的,比我之前所谓的那个viewport默认的980px要大。

      这样的问题,也就是我之前所说的物理像素与逻辑像素的关系了(即DPR)。以1920x1080为例,1080为物理像素,而我们在viewport中,获取到的,比如"width-device",是逻辑像素。所以之前viewport的默认值,所比对的大小,其实是逻辑像素的大小,而非物理像素的大小。

      以iphone6为例,在不做任何缩放的条件下,iphone6的获取到的'width-device'为375px,为屏幕的逻辑像素。而购买时我们所知的750px,则为屏幕的物理像素。

    3. CSS的问题

      有了上面第二点的一些基础,还是以iphone6为例,我们可以知道,其实我们所写的1px,在iphone6上为2px的物理像素。所以,最后的,给出一个结论。就是我们写的1px,在移动端,是逻辑像素的1px,而非物理像素的1px。

    三. 使用rem布局

    1. 简单说下rem

      rem是根据页面的根元素的font-size的一个相对的单位,即

      html{
      	font-size: 16px;
      }	

      比如当我们在一个div中,如此写

      div{
      	width: 2rem;
      }

      那么我们的width,是16*2 = 32px

    2. rem做到适配不同分辨率

      这个是现在手机淘宝的移动端的解决方案,即使用rem的特性,来对页面进行布局。

      下面举一个例子

      假定设计稿的大小为750,那么我们则将整个图分成100份来看(下面的题外话会说明为什么会分成100份来看)

      那么,我们现在就让根部元素的font-size为75px

      html{
      	font-size: 75px;
      }

      那么,我们现在就可以比对设计稿,比如设计稿中,有一个div元素,宽度,高度都为75px,那么我们这样写即可

      div{
      	height: 1rem;
      	width: 1rem;
      }

      可能看到这里,一些人还是不明白怎么用rem做到适配不同的分辨率,那么我们再来

      现在,我们换设备了,不用这个设备是一个width为640的手机

      那么这个时候,我们的rem单位就起到作用了。

      我们的rem全是根据html的font-size来改变的,所以说,这个时候,我们只需要把html下的font-size改成64px。那么,我们之前的div,因为是根据html下的font-size动态变化的,那么。此时也就变成了宽度和高度都为64px的东西了。这样,就可以做到适配不同的屏幕分辨率了。(其实就是个等比缩放)

      总结一下,我们的解决方案,其实就是 设计稿的像素/html的font-size = 用来代替px的rem。

      这一个步骤,我们需要通过JS来进行操作。

      对于js的操作在下面会提到。

    3. DPR的问题

      视觉姐姐给了我们设计稿,并交由我们实现,那么,我们应该去认真的实现:-)(试想你做了一张图,而前端很多地方并没有按照你所想的,你所给的去做,而是私自改变了很多东西,你肯定会不高兴的)

      那么1px会出现什么问题呢。

      还记得我们第二大点讲的,我们的设备,是有物理像素和逻辑像素的。而假设我们的设计稿是750的,同时还是以iphone6为例,此时如果我们的viewport是这样的

      <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

      之前说过,在不做任何缩放的条件下,iphone6获取到的viewport为375px。

      然后我们的页面中有个div,他有一个边框值,如下

      div{
      	height: 5rem;
      	widht:5rem;
      	border: 1px solid #000
      }

      此时我们写的1px,实际上是逻辑像素,而我们在iphone6上看到的是物理像素,于是这个时候,我们眼睛所看到的其实是2px(参考第二点第三个问题)

      所以此时我们需要在viewport上做文章了,此时先明确,如果要获取到真正的1px,那么我们需要这么做,将viewport改为

      <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

      即对屏幕做0.5倍的缩放。这样,我们就能得到实际的1px。

      所以到这里,我们还要明确一点,viewport的meta标签,我们这里也只能通过js来动态生成。

      同时,这样写,据说还可以避免比如inline的SVG等元素按照逻辑像素的渲染。避免了整个页面清晰度的打折(其实我并不能看出来)

    4. 文字适配问题

      最近深深纠结与rem与px做字体单位的问题,还是先分别谈下二者吧。

      rem与px的特点:

      • 以rem作为字体单位:我们可以让页面整体的文字,也跟随着html的font-size来进行改变,这样,在不同的屏幕下,可以做到文字相对屏幕的比例是一样的。

      • 以px作为字体单位: 这个是目前很多网站还是依然采用的方法。因为以上面所写的,以rem作为字体单位。无论在任何屏幕下面,我们的文字都会根据屏幕做一个适应。试想这样一个场景。你买了一个大屏手机(5.7寸的),而别人用的是4寸的手机。以rem作为字体单位的话,那大屏手机看到的文字多少和小屏手机确实一样的了。这样来做,其实并不符合我们买大屏手机的期待。同时,以rem作为字体单位,可能会导致出现很多奇怪的字体大小(毕竟是根据html的font-size动态变化的嘛),同时这其中还涉及到了一个点阵尺寸的概念,这个在下面来讲。

      字体大小引发的系列问题:

      • 字体大小:我们平时也看过,很多网站,是不以奇数作为字体大小的。我稍微查了些东西,在知乎上的现在网页设计中的为什么少有人用 11px、13px、15px 等奇数的字体?问题下,有一些比较好的解答,我就不再多说(我也并不能比这个问题说的更多),总的来说,其实就是偶数宽度的字体能够显得均衡,以及一个点阵的问题。不过因为要谈及点阵,所以我拿上面回答中的一个内容举例。

        • 倘若一个字体,只提供了12px,14px,16px的点阵。那么当你写13px,15px,17px的时候。就并没有其字体大小所对应的点阵。那么这样就造成了一个问题。他们会使用其相邻的点阵,比如对应使用了12px,14px,16px的点阵,而导致一个问题,文字占用的大小确实改变,但点阵却并没有改变。

      文字适配的解决方案:

      上面说了这么多,我们总要有一套解决方案吧

      对于一些标题性的文字,我们依然可以用rem。让他随着屏幕来进行缩放,因为标题性文字一般较大,而较大的文字,点阵对其影响就越小。这样,即使出现奇怪的尺寸,也能够让字体得到很好的渲染。

      对于一些正文内容的文字(即站在使用者的角度,你不希望他进行缩放的文字)。我们采用px来进行处理。

    四.安卓与ios不得不说的问题(解决篇)

    1. 在 三.使用rem布局 里面,我们给出了各种情况的解决方案,并且,在我举例的时候,热衷于使用iphone来举例,但其实,上面的所有问题,不是仅仅iphone会出现的问题,安卓也是一样。但是,如果你已经看完了上面,那么这里,才是真正给出我们解决方案的地方,并且,这个解决方案并不完善。

    2. 谈谈iphone的r屏与安卓的各种屏

      rem布局也好,用viewport进行缩放也罢,文字的适配问题也是,都是基于我们想对各个不同的设备所进行的匹配。这套方案很好,然而也有其兼顾不到的地方。即安卓和ios的屏幕的一些问题,当然,细的东西我们不谈,我们只谈dpr。

      • 先谈iphone

        • 其实iphone为开发者考虑到了很多东西,为了让开发者便于开发,在6plus出现之前,iphone的dpr始终也就是2(即前面所谈的物理像素/逻辑像素=2),即使是6plus出现了,iphone到底其实也就只有2,3这两个dpr。我们很容易对其做到兼顾。
      • 再谈安卓

        • 安卓并没有对自己的屏幕叫做r屏,但是其原理和iphone的r屏可以说是一样。r屏做的是什么,把两个(三个)物理像素,丢到了一个逻辑像素里面,让屏幕展现的更清晰(当然,这是我片面的理解,不过我觉得大体来说并没有错,我们也不用去深入探讨r屏还有什么东西,我也并不懂)。而安卓也是一样,他也同样把n个物理像素丢到了一个逻辑像素里面。而这里的n,也就是dpr值(所以当我看到好多人问安卓为什么不采用r屏的时候,我真的也是……醉了?)。而安卓的dpr值,并不像iphone那样,就只有两个值。安卓的dpr是千奇百怪的,可能是1.5,2,3,4,2.5等等的都有。(甚至我还看到了1.7之类的,安卓的各个设备商,玩的真尼玛high啊。怎么高兴怎么来。)

          所以,对安卓的屏幕的dpr的处理,其实是很头疼的,因为,他和我们对字体的处理,有了很大的冲突。这个在下面提及

    3. 首先看看手淘的解决方案

      • rem布局

        用js获取到页面的宽度,然后对其进行宽度/10的处理,再将其写到html的font-size中。手淘的flexible.js里面的这一部分,并为了方便看懂做了些改写。大体就是这样的

        function refreshRem(){
         	var docEl = window.document.documentElement;
            var width = docEl.documentElement.getBoundingClientRect().width;
        
            var rootSize = width/10;
            docEl.style.fontSize = rootSize + 'px';
        }
      • dpr的配置

        首先,在引入flexible.js之前,我们可以对dpr进行手动的配置,即使用自定义的meta标签来配置dpr(看清楚是flexible,而非viewport)

        <meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />

        iniital-dpr是把dpr强制设定为给定的值,而maximum-dpr则是给出一个最大的dpr限制,然后对其和系统的dpr做一个比较。

        然后依然为了方便阅读我把flexble.js这一部分的代码抽象出来,

            var doc = window.document
            var metaEl = doc.querySelector('meta[name="viewport"]');
        	var flexibleEl = doc.querySelector('meta[name="flexible"]');
        	var dpr = 0;
        	var scale = 0;			//缩放比例
        	//在meta标签中,已经有了viewport,则使用已有的viewport,并根据meta标签,对dpr进行设置
        	if (metaEl) {
        		console.warn('将根据已有的meta标签来设置缩放比例');
        		var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
        		if (match) {
        			scale = parseFloat(match[1]);
        			dpr = parseInt(1 / scale);
        		}
        	//如果在meta标签中,我们手动配置了flexible,则使用里面的内容
        	} else if (flexibleEl) {
        		var content = flexibleEl.getAttribute('content');
        		if (content) {
        			var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
        			var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
        			if (initialDpr) {
            			dpr = parseFloat(initialDpr[1]);
            			scale = parseFloat((1 / dpr).toFixed(2));    
        			}

        if (maximumDpr) {
        dpr = parseFloat(maximumDpr[1]);
        scale = parseFloat((1 / dpr).toFixed(2));
        }
        }
        }

        这样,我们通过flexible的分析与获取,对dpr进行了书写。不过其实这里,是有个问题的。即在书写maximum的的情况下,其实根本没有像文档中给我们的说法一样,做一个比较,而是做了和initialDpr一样的一个处理。不过这里也不对其做一个探讨了。

        然后,这套解决方案,然后当我们在meta标签里面并没有对viewport以及flexible两个的任意一个进行书写的时候,他也是会自动获取一个dpr值的

        if (!dpr && !scale) {
        	var isAndroid = window.navigator.appVersion.match(/android/gi);
        	var isIPhone = window.navigator.appVersion.match(/iphone/gi);、
        	//devicePixelRatio这个属性是可以获取到设备的dpr的
        	var devicePixelRatio = win.devicePixelRatio;
        	if (isIPhone) {
        	// iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
        	if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
            	dpr = 3;
        	} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            	dpr = 2;
        	} else {
            	dpr = 1;
        	}
        } else {
        	// 其他设备下,仍旧使用1倍的方案
        	dpr = 1;
        	}
        	scale = 1 / dpr;
        }

        这里我们可以看到,手机淘宝并没有对安卓的dpr进行一个适配,原因之后再讲。

        然后到了这里,我们获取到了我们需要的dpr值,并根据dpr值获取到了我们所需要的缩放值(即scale)

        然后我们要做的,就是在并没有viewport的meta标签对情况下自己动态将这个标签写进我们的header,形式是这样的

        <meta name="viewport" content="initial-scale=scale, maximum-scale=scale, minimum-scale=scale, user-scalable=no">

        这样,dpr的配置,也就完成了,当然,安卓设备并没有对dpr进行一个配置(上面的动态生成就不给出js了)

      • 文字的解决方案

        由于手淘暂时并没有对安卓做一个处理,所以,这里,只是对iphone做了一个处理

        即在html上,加入了一个自定义属性,data-dpr。

        <html data-dpr='dpr'></html>

        还是以750的设计稿为例(即iphone6)

        假如设计稿上某a标签是32px,那么,我们要这么写

        a{
        	font-size: 16px
        }
        /*iphone6*/
        [data-dpr='2'] a{
        	font-size: 32px
        }
        /*iphone6plus*/
        [data-dpr='3'] a{
        	font-size: 32px
        }
    4. 现在的一些问题

      正如我们看到的,手淘目前的方案里面,是没有考虑到安卓dpr的问题的。即,这套方案,只对于iphone的r屏做了一个处理,而对于安卓,并没有做dpr的处理。我们来分析下原因吧(个人拙见)。

      我们希望字体能够以px来展现,同时,我们也希望我们的东西能对dpr做一个适配。对于ios,这自然是可行的,即采用了data-dpr的自定义属性来调整文字。4到6写一套字体大小,6p写一套字体大小,然后在对dpr为1的屏幕写一套字体大小。其实这种写法还是很恶心,不过基于对dpr的适配,这样写也算是个解决方案了。

      不过同样的解决方案到安卓就不行了,安卓的dpr有时候会很乱(比如现在在goole的手机测试里面可以看到,安卓的dpr,lg的某些设备还采用了1.7那样的奇怪dpr)。而当1.7dpr这种不规范的数字出现的时候,我们就不能采用之前的解决方案了,比如

      [data-dpr='1.7'] a{
      	font-size: 25px
      }

      这样的东西是不可能去写的,那万一还有2.25,2.5之类的呢?我们都要拿去匹配么?

      其实现在,因为我们通过devicePixelRatio可以获取到安卓的dpr值,即可以做到对安卓设备的dpr一个匹配。但是,文字如果采用px的话,确实是很难做到匹配的。

      即总结一下,就是说,对于安卓的dpr匹配,目前来说,是没有什么问题的,但是,对于dpr匹配之后的字体,那肯定是有问题的。

      常见的dpr下的字体,我们依然可以解决,但是不常见的dpr,我们确实很难做到对dpr的解决。那如何解决这些问题呢。目前以我本人这个不太灵光的脑袋,确实也不晓得该如何进行一个处理了,起码做不到很好的解决。

      不过,还是丢上些个人的观点吧。

      在之前的对dpr的判断中,是根据了设备进行判断,即安卓不对dpr进行改变,仅对ios的设备进行改变。那么,我们其实可不可以以dpr的值来做一个处理呢?即像这样写

      if (!dpr && !scale) {
      	//devicePixelRatio这个属性是可以获取到设备的dpr的
      	var devicePixelRatio = win.devicePixelRatio;
      	//判断dpr是否为整数
      	var isRegularDpr = devicePixelRatio.toString().match(/^[1-9]\d*$/g)
      	if (isRegularDpr) {
      	// 对于是整数的dpr,对dpr进行操作
       	if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
          	dpr = 3;
      	} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
          	dpr = 2;
      	} else {
          	dpr = 1;
      	}
      } else {
      	// 对于其他的dpr,人采用dpr为1的方案
      	dpr = 1;
      	}
      	scale = 1 / dpr;
      }	

      我们对这里做了一点点修改,即来判断dpr是否是规则的,也就是是否是我们常见的1,2,3等,然后,我们只对规则的dpr,来进行一个字体的处理。这样,iphone依然还是用之前的匹配方案。而其实目前安卓,很多的设备还是比较常见的dpr了,所以我们这里,将之前对设备的判断,转变成对dpr是否是整数的一个判断。其他地方不变,可以解决对安卓dpr的部分匹配。

      同样,开发的时候,如果并不在乎字体的问题的话,大可以直接使用rem。那样是可以做到dpr和文字都适配的问题。不过正如我们讲到字体的时候所说的,使用rem是很多用户不希望的(大屏机还是和小屏机看到一样多的内容),同时,还有点阵的问题。

      好,东西写到这里,也将近到了尾声。第一次写这么长的东西,感觉好累啊=_=。嗯还有篇2000字的检讨要写,默默匿了去写检讨了。

    参考

    手机淘宝的flexible设计与实现

    题外话:

    1. iphone6plus很有趣的地方

      iphone6plus照理来说的,其实际dpr是2.87左右的,不过,为了方便开发者来开发,iphone6plus对其做了一个调整,将dpr调整为3,然后在对屏幕进行了一个缩放。这样做,自然是方便了开发者前去开发,然而,这样做,也有了一些性能上的损失。(iphone为开发者考虑的还是挺周全的,看看隔壁安卓,dpr怎么爽怎么来,都特么自己玩自己的)

    2. 有意思的vh和vw

      vh,vw目前还存在很大程度的兼容性问题,所以还并没有采用。

      vh,vw有什么特点呢

      这两个元素分别会把屏幕上的可视高度(说通俗点就是你手机屏幕那个框框头装起的东西),宽度,分成100份来看,比如先前我们用rem来处理的地方,我们需要在html元素下写上font-size: 75px,然后再在div下写上width:1rem。而有了vh,vw之后,我们如此处理html的font-size就好。

      html {
      	font-size: 10vw;
      }

      这样写,省去了一部js操作的步骤。

    展开全文
  • 移动端布局实例 基于rem的布局 首先了解em单位,em单位是参照元素自身的文字大小来设置尺寸,rem指的是参照根节点的文字大小,根节点指的是html标签,设置html标签的文字大小,其他的元素相关尺寸设置用rem,这样...

    移动端布局实例
    基于rem的布局
    首先了解em单位,em单位是参照元素自身的文字大小来设置尺寸,rem指的是参照根节点的文字大小,根节点指的是html标签,设置html标签的文字大小,其他的元素相关尺寸设置用rem,这样,所有元素都有了统一的参照标准,改变html文字的大小,就会改变所有元素用rem设置的尺寸大小。

    em单位示例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            
            .box01{
                font-size:12px;
                width:20em;
                height:10em;
                background-color:gold;
            }
    
            .box02{
                font-size:20px;
                width:20em;
                height:10em;
                background-color:green;
            }
    
            p{
                font-size:20px;
                text-indent:2em;
            }
    
        </style>
    </head>
    <body>
        <div class="box01"></div>
        <br />
        <br />
        <div class="box02"></div>
    
    
        <p>首先了解em单位,em单位是参照元素自身的文字大小来设置尺寸,rem指的是参照根节点的文字大小,根节点指的是html标签,设置html标签的文字大小,其他的元素相关尺寸设置用rem,这样,所有元素都有了统一的参照标准,改变html文字的大小,就会改变所有元素用rem设置的尺寸大小。首先了解em单位,em单位是参照元素自身的文字大小来设置尺寸,rem指的是参照根节点的文字大小,根节点指的是html标签,设置html标签的文字大小,其他的元素相关尺寸设置用rem,这样,所有元素都有了统一的参照标准,改变html文字的大小,就会改变所有元素用rem设置的尺寸大小。</p>
    </body>
    </html>
    
    em单位示例
    

    最小的文字单位是12px,小于12px的文字大小都会默认改为12px;

    rem单位示例

    <!DOCTYPE html>
    <html lang="en" style="font-size:30px;">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            .box01{
                font-size:12px;
                width:20rem;
                height:10rem;
                background-color:gold;
                margin:1rem;
            }
    
            .box02{
                font-size:20px;
                width:20rem;
                height:10rem;
                background-color:green;
                margin:1rem;
                
            }
        </style>
    </head>
    <body>
        
        <div class="box01"></div>
    
        <div class="box02"></div>
    
    </body>
    </html>
    
    rem单位示例
    

    rem是在移动页面将内容进行等比例缩小;

    rem示例-通过js控制rem来动态控制内容宽度

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <!--<script type="text/javascript" src="js/set_root.js"></script>-->
        <title>Document</title>
        <style type="text/css">
            body{
                margin:0;
            }
            .header{
                height:2.5rem;
                background-color:gold;
                text-align:center;
                line-height:2.5rem;
                font-size:20px;
            }
    
        </style>
    </head>
    <body>
        <div class="header">头部文字</div>
    </body>
    <script>
        (function(){
        var calc = function(){
            var docElement = document.documentElement;
            var clientWidthValue = docElement.clientWidth > 750 ? 750 : docElement.clientWidth;
            docElement.style.fontSize = 20*(clientWidthValue/375) + 'px';
        };
        calc();
        window.addEventListener('resize',calc);
    })();
    </script>
    </html>
    
    通过js控制rem来动态控制内容宽度
    

    cssrem安装
    cssrem插件可以动态地将px尺寸换算成rem尺寸

    下载本项目,比如:git clone https://github.com/flashlizi/cssrem
    进入packages目录:Sublime Text -> Preferences -> Browse Packages…
    复制下载的cssrem目录到刚才的packges目录里。 重启Sublime Text。

    配置参数 参数配置文件:Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px转rem的单位比例,默认为40。 max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。 available_file_types - 启用此插件的文件类型。默认为:[".css", “.less”, “.sass”]。

    流体布局制作首页
    将ui设计师给的图片按缩小一半来制作页面

    index.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <title>天天生鲜-首页</title>
    </head>
    <body>
        <div class="header clearfix">
            <a href="#" class="logo"><img src="images/logo.png" alt="天天生鲜logo"></a>
            <a href="#" class="search"></a>
        </div>
    </body>
    </html>
    
    set_root.js
    (function(){
        var calc = function(){
            var docElement = document.documentElement;
            var clientWidthValue = docElement.clientWidth > 750 ? 750 : docElement.clientWidth;
            docElement.style.fontSize = 20*(clientWidthValue/375) + 'px';
        }
        calc();
        window.addEventListener('resize',calc);
    })();
    
    main.css
    .header{
        height:50px;
        background-color:#37ab40;
        position:relative;
    }
    
    .logo{
        display:block;
        width:89px;
        height:36px;
        margin:7px auto 0;
    }
    
    .logo img{
        width:100%;
    }
    
    .search{
        width:27px;
        height:27px;
        position:absolute;
        right:15px;
        top:12px;
        background:url(../images/icons.png) left top no-repeat;
        background-size:60px 840px;
    }
    
    流体布局制作首页
    

    移动端轮播图和菜单页的制作
    如果软件是在微信中,固定定位的按钮可能无效,因此移动端软件的三层式结构不应该用固定定位;解决方式是在最外面套一个大盒子,然后给里面的设置absolute绝对定位;最外层left:0;right:0;top:0;bottom:0;这样可以让最外层达到手机屏幕最大化;
    将上下两层使用left:0;right:0;top:2.5rem;bottom:2.5rem;固定住;中间层再设置left:0;right:0;top:2.5rem;bottom:2.5rem;固定和overflow:auto可以进行滚动条;为了避免出现横线滚动条,拆开写overflow-y:auto;overflow-x:hidden;

    雪碧图的使用除了给除第一个以外的其他元素添加类属性之外,还可以使用新增选择器的nth-child()来设置position;
    移动端文字应该直接使用像素,不需要rem,因为太小了不易观看;
    选择器层级越少越好,因为它找标签或属性等是从层级选择器的右边开始找的;

    弹性盒模型布局
    1、容器属性
    display : flex
    声明使用弹性盒布局

    flex-direction : row | row-reverse | column | column-reverse
    确定子元素排列的方向

    flex-wrap : nowrap | wrap | wrap-reverse
    元素超过父容器尺寸时是否换行

    flex-flow : flex-direction | flex-wrap
    同时设置flex-direction 和 flex-wrap

    justify-content : flex-start | flex-end | center | space-between | space-around
    子元素的尺寸确定之后,用此属性来设置flex-direction定义方向上的分布方式

    align-items : flex-start | flex-end | center | baseline | stretch
    子元素的尺寸确定之后,用此属性来设置flex-direction定义方向上的垂直方向的分布方式

    align-content : flex-start | flex-end | center | space-between | space-around | stretch
    设置多行子元素在行方向上的对齐方式

    2、条目属性
    flex : none | <’ flex-grow ‘> <’ flex-shrink >’? || <’ flex-basis '>
    同时设置flex-grow 和 flex-shrink 以及 flex-basis

    flex-grow : number
    表示的是当父元素有多余的空间时,这些空间在不同子元素之间的分配比例

    flex-shrink: number
    当父元素的空间不足时,各个子元素的尺寸缩小的比例

    flex-basis :length | percentage | auto | content
    用来确定弹性条目的初始主轴尺寸。

    align-self :auto | flex-start | flex-end | center | baseline | stretch
    覆写父元素指定的对齐方式

    order : integer
    改变条目在容器中的出现顺序

    移动首页布局代码
    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script type="text/javascript" src="js/set_root.js"></script>
        <title>天天生鲜-首页</title>
    </head>
    <body>
    <div class="main_wrap">
    
        <div class="header clearfix">
            <a href="#" class="logo"><img src="images/logo.png" alt="天天生鲜logo"></a>
            <a href="#" class="search"></a>
        </div>
        <div class="center_con">
    
            <div class="slide"><img src="images/slide.jpg" alt="幻灯片"></div>
    
            <!-- ul.menu>(li>a+h2{水果})*8 -->
            <div class="menu_con clearfix">
                <ul class="menu">
                    <li>
                        <a href="#"></a>
                        <h2>水果</h2>
                    </li>
                    <li>
                        <a href="#"></a>
                        <h2>水果</h2>
                    </li>
                    <li>
                        <a href="#"></a>
                        <h2>水果</h2>
                    </li>
                    <li>
                        <a href="#"></a>
                        <h2>水果</h2>
                    </li>
                    <li>
                        <a href="#"></a>
                        <h2>水果</h2>
                    </li>
                    <li>
                        <a href="#"></a>
                        <h2>水果</h2>
                    </li>
                    <li>
                        <a href="#"></a>
                        <h2>水果</h2>
                    </li>
                    <li>
                        <a href="#"></a>
                        <h2>水果</h2>
                    </li>
                </ul>
            </div>
            
            <div class="common_model clearfix">
                <div class="common_title">
                    <h3>新鲜水果</h3>
                    <a href="#">更多 &gt;</a>
                </div>
    
                <a href="#" class="banner"><img src="images/banner.jpg" alt="banner"></a>
    
                <ul class="goods_list">
                    <li>
                        <a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
                        <h4>新西兰皇家大红苹果</h4>
                        <p class="unit">12/提</p>
                        <p class="price">¥68.00</p>
                        <a href="#" class="add_chart"></a>
                    </li>
                    <li>
                        <a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
                        <h4>新西兰皇家大红苹果</h4>
                        <p class="unit">12/提</p>
                        <p class="price">¥68.00</p>
                        <a href="#" class="add_chart"></a>
                    </li>
                    <li>
                        <a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
                        <h4>新西兰皇家大红苹果</h4>
                        <p class="unit">12/提</p>
                        <p class="price">¥68.00</p>
                        <a href="#" class="add_chart"></a>
                    </li>
                </ul>
            </div>
    
            <div class="common_model clearfix">
                <div class="common_title">
                    <h3>新鲜水果</h3>
                    <a href="#">更多 &gt;</a>
                </div>
    
                <a href="#" class="banner"><img src="images/banner.jpg" alt="banner"></a>
    
                <ul class="goods_list">
                    <li>
                        <a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
                        <h4>新西兰皇家大红苹果</h4>
                        <p class="unit">12/提</p>
                        <p class="price">¥68.00</p>
                        <a href="#" class="add_chart"></a>
                    </li>
                    <li>
                        <a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
                        <h4>新西兰皇家大红苹果</h4>
                        <p class="unit">12/提</p>
                        <p class="price">¥68.00</p>
                        <a href="#" class="add_chart"></a>
                    </li>
                    <li>
                        <a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
                        <h4>新西兰皇家大红苹果</h4>
                        <p class="unit">12/提</p>
                        <p class="price">¥68.00</p>
                        <a href="#" class="add_chart"></a>
                    </li>
                </ul>
            </div>
        </div>
        
        <ul class="footer">
            <li>
                <a href=""></a>
                <h2>首页</h2>
            </li>
            <li>
                <a href=""></a>
                <h2>首页</h2>
            </li>
            <li>
                <a href=""></a>
                <h2>首页</h2>
            </li>
            <li>
                <a href=""></a>
                <h2>首页</h2>
            </li>
        </ul>
    </div>
    </body>
    </html>
    
    index.html
    

    set_root.js

    (function(){
        var calc = function(){
            var docElement = document.documentElement;
            var clientWidthValue = docElement.clientWidth > 750 ? 750 : docElement.clientWidth;
            docElement.style.fontSize = 20*(clientWidthValue/375) + 'px';
        };
        calc();
        window.addEventListener('resize',calc);
    })();
    
    set_root.js
    

    reset.css

    /*  去掉标签默认的间距   */
    body,ul,ol,p,h1,h2,h3,h4,h4,h6,dl,dd,select,input,form{
       margin:0;
       padding:0;
    }
    /*  去掉小圆点以及数字   */
    ul,ol{
       list-style:none;
    }
    /* 去掉下划线 */
    a{text-decoration:none;}
    
    /* 去掉斜体 */
    em{
       font-style:normal;
    }
    /* 让h标签继承body的文字设置 */
    h1,h2,h3,h4,h4,h6{
       font-size:100%;
       font-weight:normal;
    }
    /* 在IE下去掉图片做链接时生成的框线 */
    img{
       border:0px;
    }
    
    /* 清除浮动以及清除margin-top塌陷 */
    
    .clearfix:before,.clearfix:after{
       content:'';
       display:table;
    }
    .clearfix:after{
       clear:both;
    }
    .clearfix{
       zoom:1;
    }
    
    
    .fl{
       float:left;
    }
    
    .fr{
       float:right;
    }
    
    reset.css
    

    main.css

    
    .main_wrap {
        position: absolute;
        background-color: gold;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
    }
    
    /* 顶部样式   */
    .header {
        height: 2.5rem;
        background-color: #37ab40;
        position: relative;
    }
    
    .logo {
        display: block;
        width: 4.45rem;
        height: 1.8rem;
        margin: 0.35rem auto 0;
    }
    
    .logo img {
        width: 100%;
    }
    
    .search {
        width: 1.35rem;
        height: 1.35rem;
        position: absolute;
        right: 0.75rem;
        top: 0.6rem;
        background: url(../images/icons.png) left top no-repeat;
        background-size: 3.0rem 42.0rem;
    }
    
    /* 中间滚动区域的样式   */
    .center_con {
        position: absolute;
        left: 0px;
        right: 0px;
        top: 2.5rem;
        bottom: 2.5rem;
        background-color: #efefef;
    
        /* 只自动出现竖向滚动条,不出现横向滚动条  */
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 0.5rem;
    }
    
    .slide {
        height: 7.0rem;
    }
    
    .slide img {
        width: 100%;
    }
    
    .menu_con {
        height: 9.25rem;
        background-color: #fff;
        margin-top: 0.5rem;
        overflow: hidden;
    }
    
    .menu_con ul {
        width: 18rem;
        height: 8.375rem;
        margin: 0.6rem 0 0 1.375rem;
    }
    
    .menu_con li {
        width: 2.8rem;
        height: 4.05rem;
        float: left;
        margin-right: 1.625rem;
    }
    
    .menu_con li a {
        display: block;
        height: 2.8rem;
        background: url(../images/icons.png) left -3.025rem no-repeat;
        background-size: 3.0rem 42.0rem;
    }
    
    .menu_con li:nth-child(2) a {
        background-position: left -6rem;
    }
    
    .menu_con li:nth-child(3) a {
        background-position: left -9rem;
    }
    
    .menu_con li:nth-child(4) a {
        background-position: left -12rem;
    }
    
    .menu_con li:nth-child(5) a {
        background-position: left -15rem;
    }
    
    .menu_con li:nth-child(6) a {
        background-position: left -18rem;
    }
    
    .menu_con li:nth-child(7) a {
        background-position: left -21rem;
    }
    
    .menu_con li:nth-child(8) a {
        background-position: left -24rem;
    }
    
    .menu_con li h2 {
        font: bold 13px/1.25rem 'Microsoft Yahei';
        text-align: center;
        color: #666;
    }
    
    .common_model {
        height: 17.25rem;
        background-color: #fff;
        margin-top: 0.5rem;
    }
    
    .common_title {
        width: 17.75rem;
        height: 0.9rem;
        margin: 0.8rem auto 0;
    }
    
    .common_title h3 {
        float: left;
        font: bold 15px/0.9rem 'Microsoft Yahei';
        color: #fbc83d;
        border-left: 0.25rem solid #fbc83d;
        text-indent: 0.4rem;
    }
    
    .common_title a {
        float: right;
        font: normal 12px/0.9rem 'Microsoft Yahei';
        color: #7f7f7f;
    }
    
    .banner {
        display: block;
        width: 17.75rem;
        height: 4.5rem;
        margin: 0.5rem auto 0;
    }
    
    .banner img {width: 100%;}
    
    .goods_list {
        width: 17.75rem;
        height: 9.325rem;
        margin: 0.5rem auto 0;
    }
    
    .goods_list li {
        width: 5.9rem;
        height: 9.325rem;
        border-right: 1px solid #e7e7e7;
        float: left;
        box-sizing: border-box;
        position: relative;
    }
    
    .goods_list li:last-child {border-right: 0px;}
    
    .goods_link {
        display: block;
        width: 4.5rem;
        height: 4.5rem;
        margin: 0.375rem auto 0;
    }
    
    .goods_link img {
        width: 100%;
    }
    
    .goods_list h4 {
        font: normal 15px/15px 'Microsoft Yahei';
        width: 5.0rem;
        margin: 0.925rem auto 0;
    
        overflow: hidden;
        /* 强制文字不换行 */
        white-space: nowrap;
        /* 超出部分显示省略号   */
        text-overflow: ellipsis;
    }
    
    .unit {
        width: 5.0rem;
        font: normal 12px/12px 'Microsoft Yahei';
        color: #bbb;
        margin: 0.8rem auto 0;
    }
    
    .price {
        width: 5.0rem;
        font: normal 12px/12px 'Microsoft Yahei';
        color: #ff4400;
        margin: 0.5rem auto 0;
    }
    
    .add_chart {
        position: absolute;
        width: 1.7rem;
        height: 1.7rem;
        right: 0.675rem;
        bottom: 0;
        background: url(../images/icons.png) left -27.0rem no-repeat;
        background-size: 3.0rem 42.0rem;
    }
    
    .footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2.5rem;
        background-color: #fff;
    
    }
    
    .footer li {
        width: 25%;
        height: 2.5rem;
        float: left;
    }
    
    .footer li a {
        display: block;
        width: 1.3rem;
        height: 1.3rem;
        margin: 0.35rem auto 0;
        background: url(../images/icons.png) left -30.0rem no-repeat;
        background-size: 3.0rem 42.0rem;
    }
    
    .footer li:nth-child(2) a {
        background-position: left -33rem;
    }
    
    .footer li:nth-child(3) a {
        background-position: left -36rem;
    }
    
    .footer li:nth-child(4) a {
        background-position: left -39rem;
    }
    
    .footer li h2 {
        font: normal 12px/0.8rem 'Microsoft Yahei';
        color: #949392;
        text-align: center;
    }
    
    main.css
    

    最后,给大家推荐一个前端学习进阶内推交流圈子前端资料分享),不管你在地球哪个方位,
    不管你参加工作几年都欢迎你的入驻!(会定期免费提供一些收藏的免费学习书籍资料以及整理好的面试题和答案文档!)

    如果您对这个文章有任何异议,那么请在文章评论处写上你的评论。

    如果您觉得这个文章有意思,那么请分享并转发,或者也可以关注一下表示您对我们文章的认可与鼓励。

    愿大家都能在编程这条路,越走越远。

    展开全文
  • 移动端Web页面布局

    2019-01-23 14:54:21
    viewport viewport就是浏览器上,用来显示网页的那一部分区域。和我们手机的宽度不一样的,无论你的手机宽度是320px,还是640px,在手机浏览器内部的宽度,始终会是浏览器本身的viewport的宽度。...

    viewport

    viewport就是浏览器上,用来显示网页的那一部分区域。和我们手机的宽度不一样的,无论你的手机宽度是320px,还是640px,在手机浏览器内部的宽度,始终会是浏览器本身的viewport的宽度。如今的浏览器,都会给自己的本身提供一个viewport的默认值,目前,新版本的手机浏览器,绝大部分是以980px作为默认的viewport值的。这样在我们的手机浏览器中,就会出现横向滚动条,我们知道在页面布局中除了极少一些网页是特殊的横向布局,其他正常情况下,出现横向滚动条是非常致命的行为。所以,一般的,我们会专门给浏览器设计一个移动端的页面。再通过对viewport的简单设置,使viewport与设备尺寸相等或有一个相互关系,从而使我们的页面有一个更好的体验。

    我们可以通过页面的meta标签进行设置,设置语句如下:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    

    参数解释:

    • width = device-width:宽度等于当前设备的宽度
    • initial-scale:初始的缩放比例(默认设置为1.0)
    • minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
    • maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
    • user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)

    移动端页面常用单位

    比较常用的单位有em,rem,%,vw和vh等,这些单位都有一个共同点,他们都是一个相对单位,是可以根据页面的viewport的变化,进行实时改变。

    我们简单介绍一下:em的值,根据父元素的font-size进行计算;rem是根据跟元素的font-size进行计算;% 根据父元素的尺寸进行计算;vw和vh分别根据viewport的宽度和高度进行计算,100vw或vh,等于viewport的宽度或高度。

    rem是相对尺寸单位,rem是将根节点html的font-size的值作为整个页面的基准尺寸,计算如下:

    元素的rem尺寸 = 元素的psd稿测量的像素尺寸 / 动态设置的html标签的font-size值

    设计稿的宽度像素/html的font-size = 1rem的值。当然我们需要动态的对html的font-size进行改变。

    @media screen and (min-width: 320px) {html{font-size:17.06666px;}}
    @media screen and (min-width: 360px) {html{font-size:19.2px;}}
    @media screen and (min-width: 375px) {html{font-size:20px;}}
    @media screen and (min-width: 400px) {html{font-size:21.33333px;}}
    @media screen and (min-width: 414px) {html{font-size:22.08px;}}
    @media screen and (min-width: 440px) {html{font-size:23.46666px;}}
    @media screen and (min-width: 480px) {html{font-size:25.6px;}}
    @media screen and (min-width: 520px) {html{font-size:27.73333px;}}
    @media screen and (min-width: 560px) {html{font-size:29.86666px;}}
    @media screen and (min-width: 600px) {html{font-size:32px;}}
    @media screen and (min-width: 640px) {html{font-size:34.13333px;}}
    @media screen and (min-width: 680px) {html{font-size:36.26666px;}}
    @media screen and (min-width: 720px) {html{font-size:38.4px;}}
    @media screen and (min-width: 750px) {html{font-size:40px;}}
    @media screen and (min-width: 760px) {html{font-size:40px;}}
    @media screen and (min-width: 800px) {html{font-size:40px;}}
    @media screen and (min-width: 960px) {html{font-size:40px;}}
    

    大厂的做法

    /*  京东 m.jd.com */
    @media only screen and (min-width: 320PX) and (max-width:360PX) {
        html {
            font-size:13.65px
        }
    }
    @media only screen and (min-width: 360PX) and (max-width:375PX) {
        html {
            font-size:15.36px
        }
    }
    @media only screen and (min-width: 375PX) and (max-width:390PX) {
        html {
            font-size:16px
        }
    }
    @media only screen and (min-width: 390PX) and (max-width:414PX) {
        html {
            font-size:16.64px
        }
    }
    @media only screen and (min-width: 414PX) and (max-width:640PX) {
        html {
            font-size:17.664px
        }
    }
    @media screen and (min-width: 640PX) {
        html {
            font-size:27.31px
        }
    }
    /* 
    我们来看看怎么计算的
    设计图中 尺寸40px盒子,我们可以看到在媒体查询中,iPhone6 的布局视口是375,即html的font-size为16px,
    则计算为rem: 40/16 = 2.5 rem
    */
    
    展开全文
  • 移动端页面布局

    2018-06-26 08:46:17
    一、移动端app分类1、Native App原生app手机应用程序 使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是object-C2、Hybrid App 混合型app手机应用程序 混合使用原生的程序和html5页面开发的...

    一、移动端app分类

    1、Native App原生app手机应用程序

      使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是object-C

    2、Hybrid App 混合型app手机应用程序

      混合使用原生的程序和html5页面开发的手机应用

    3、Web App 基于Web的app手机应用程序

      完全使用html5页面加前端js框架开发的手机应用

    二、Viewport视口

      视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页,这样带来的后果是移动端会出现横向滚动条,为了避免这种情况,移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看,可以用meta标签,name="viewport"来设置视口的大小,将视口的大小设置为和移动设备可视区一样的大小。

      在移动端用来承载网页的这个区域,就是我们的视觉窗口,viewport(视口),这个区域可以设置高度宽度,可以按比例放大缩小,而且能设置是否允许用户自行缩放。

    参数说明:

    width:宽度设置的是viewport宽度,可以设置device-width特殊值
    initial-scale:初始缩放比,大于0的数字
    maximum-scale:最大缩放比
    minimum-scale:最小缩放比
    user-scalable:用户是否可以缩放,yes或no(1或0)
    <!--viewport只有移动端才能识别-->
    <!--设置宽度 设置成和设备一样的宽度(width=device-width)-->
    <!--设置默认的缩放比 initial-scale =1.0-->
    <!--设置是否允许用户自行缩放 user-scalable no yes-->

    设置方法如下:

    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    PC页面在手机缩放的原因:

    1、iphone默认的viewport980px ,user-scalable=yes
    2、那么initial-scale在320px的浏览器上就是320/980 为0.33333

    总结:

    用meta标签把viewport的宽度设为device-width,同时initial-scale=1.user-scale=0就构建了一个标准的移动web页面

     

    三、PC及移动端页面适配方法

    设备有多种不同的分辨率,页面适配方案有如下几种:

    1、全适配:流体布局+响应式布局

    2、移动端适配:

      使用百分比自适应布局(流式布局)同时需要对移动端的viewport视口进行设置,就可以达到适配的目的

      a、流体布局+少量响应式

      b、基于rem的布局

      c、弹性合模型

    a、流体布局

      就是使用百分比来设置元素的宽度,元素的高度按实际高度写固定值,流体布局中,元素的边线(border)无法用百分比,可以使用样式中的计算函数calc()来设置宽度,或者使用box-sizing属性将盒子设置为边线计算盒子尺寸。

    1、calc()  可以通过计算的方式给元素加尺寸。比如:width:calc(25% - 4px);

    2、box-sizing

      a、content-box 默认的盒子尺寸计算方式。

      b、border-box 置盒子的尺寸计算方式为从边框开始,盒子的尺寸,边框和内填充算在盒子尺寸内

    响应式布局

      响应式布局就是使用媒体查询的方式,通过查询浏览器的宽度,不同的宽度应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而实现响应式布局,响应式布局的页面可以适配多种终端屏幕(pc、平板、手机)。

    相应布局的伪代码如下:

    b、基于rem的布局

    1、em单位是参照元素自身的文字大小来设置尺寸

    2、rem指的是参照根节点的文字大小。

      根节点指的是html标签,设置html标签的大小,其他的元素相关尺寸设置用rem,这样,所有元素都有了统一的参照标准,改变html文字的大小,就会改变所有元素用rem设置的尺寸大小。

     

     cssrem安装:cssrem插件可以动态地将px尺寸换算成rem尺寸

      下载本项目,比如:git clone https://github.com/flashlizi/cssrem 进入packages目录:Sublime  Text-》Preferences-》Browse  Packages  复制下载的cssrem目录到刚才的packages目录里。重启Sublime  Text。

      配置参数  参数配置文件:Sublime  Text-》Preferences-》Package  Settings-》cssrem 里面有个px_to_rem (意思是px转rem的单位比例,默认为40)。max_rem_fraction_length(px转rem的小数部分最大的长度。默认为6)。availiable_file_types 启用此插件的文件类型。默认为:[".css",".less","sass",".html"]。

    c、弹性盒模型布局

    1、容器属性 display:flex  声明使用弹性盒布局(全部都是在父元素上设置)

    使用display:flex相对于把子元素变为行内块元素,并且之间不会产生间隙。

      确定子元素排列的方向: flex-direction:row | row-reverse|column|column-reserve

      a、 flex-direction:row 默认子元素水平靠左排列

     b、 flex-direction:row-reverse  子元素靠右倒序排列,类似于右浮动

     c、 flex-direction:column; 竖排

     

     d、 flex-direction:column-reverse; 倒序竖排

     

      元素超过父容器尺寸时是否换行: flex-wrap:nowrap|wrap|wrap-reverse

      a、flex-wrap:nowrap; 子元素宽度超过父级宽度时,默认不换行  

    b、flex-wrap:wrap; 子元素宽度超过父级宽度时,换行 

     

    c、flex-wrap:wrap-reserve; 子元素宽度超过父级宽度时,倒序换行 

     

        同时设置flex-direction | flex-wrap如: flex-flow:flex-direction | flex-wrap  flex-flow:row  wrap;

      子元素的尺寸确定之后,用此属性来设置flex-direction定义方向上的分布方式:

      justify-content:flex-start | flex-end | center | space-between | space-around

      a、justify-content:flex-start  整体子元素靠左

      b、justify-content:flex-end  整体子元素靠右

     

    c、justify-content:center  整体子元素居中

     

    d、justify-content:space-between  第一个子元素靠左顶格,最后一个子元素靠右顶格,中间子元素均分距离

     

    e、justify-content:space-around  第一个子元素靠左的间距和最后一个子元素靠右的间距是中间子元素间距的一半,中间的元素等分间距。

     

      子元素的尺寸确定之后,用此属性来设置flex-direction定义方向上的垂直方向的分布方式:align-items:flex-start | flex-end | center | baseline | stretch

      a、align-items:flex-start  整体垂直靠上排列

    b、align-items:flex-end  整体垂直靠下排列

     

    c、align-items:center  整体子元素垂直居中(也可以使用margin或padding或定位来实现)

     

    d、align-items:baseline  子元素内的文字底部对齐,如果文字大小不同,会导致子元素底部不对齐

     

    ealign-items:stretch  如果子元素不设置高度,高度会被拉伸到和父元素高度相同(除去自身的margin)

      设置多行子元素在行方向上的对齐方式align-content : flex-start | flex-end | center | space-between | space-between | space-around | stretch

    a、align-content : flex-start  多行整体靠上排列

    b、align-content : flex-end 多行整体靠下排列

    c、align-content :center 多行整体居中排列

    d、align-content:space-between  第一行子元素靠上顶格,最后一行子元素靠下顶格,中间行子元素等分垂直的间距

    2、条目属性

      同时设置flex-grow和flex-shrink以及flex-basis 如:flex:none | <'flex-grow' ><'flex-shrink'>'?||<'flex-basis'>

      表示当父元素又多余的空间时,这些空间在不同子元素质检的分配比例。flex-grow:number

      当父元素的空间不足时,各个子元素的尺寸缩小的比例。flex-shrink:number

      用来确定弹性条目的初始主轴尺寸。flex-basis:length|precentage|auto|content

      覆写父元素指定的对齐方式。align-self:auto | flex-start | flex-end |center|baseline|stretch

      改变条目在容器中的出现顺序。order:integer

     

    展开全文
  • 移动端布局方式大类

    2020-10-08 22:28:59
    移动端布局方式 大体分为两种,第一种是重新根据手机屏幕建立新的页面,第二种是将原来pc端页面变成响应式的(通过媒体查询,根据屏幕大小来改变内容大小及布局) 一、新创建 1.流式布局 百分比布局 对盒子给一个...
  • 移动端有哪些常见布局方式?

    万次阅读 2018-06-05 10:44:37
     今天给大家分享一下,修真院官网css任务13,深度思考中的知识点——移动端有哪些常见布局方式? 1.背景介绍 随着智能手机的普及以及社会的发展,传统的网站布局已经无法适应现状,我们编写的网页不仅仅要展示在...
  • 常见的页面布局方式有, 静态布局 px布局 流式布局(Liquid Layout) 主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用) 自适应布局(Adaptive Layout) 即创建多个静态布局,每个静态布局对应一个...
  • 移动端页面布局:百分比布局、rem布局 1 弹性盒布局(百分比布局) 例如,拉勾网、天猫首页。 好处:充分发挥大手机的优势——显示内容越多;缺点:屏幕过大,间距过大,比例失调。 特点: - 顶部与底部的bar...
  • HTML移动端页面重构布局8大方法

    万次阅读 2018-07-27 18:37:59
    1.固定布局  方法 &lt;head&gt;里把&lt;meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"&gt;加好,然后根据设计稿...
  • 从我工作以来,开发的一直都是移动端的页面,只有偶尔去开发几个PC端的页面,现在是一个移动端的时代,移动先行已经深入骨髓,作为一个web前端开发,如果你还在为如何开发移动端页面而迷茫,或者你还在为开发出了一...
  • 这几天做了关于移动端的一些页面,发现了一些问题,在这记录下,备用也供大家参考下1:移动端通过%布局,当页面出现键盘时,页面高度改变从而会压缩整个页面(1) var viewHeight = window.innerHeight; $(document...
  • 移动端与pc端公用一个域名

    千次阅读 2015-12-07 17:51:00
    当在pc端浏览网页时,采用pc端的样式加载页面,当在移动端浏览网页时,则直接跳转到移动端页面,域名不变(设备自适应网页加载的布局和样式)。 在网页加载刚开始,对设备进行自主判断,相应加载移动端或者pc端...
  • 页面布局移动端和pc端的转换 js

    千次阅读 2017-10-18 10:34:18
    现在大部分网站都要求pc端何...2.然后根据判断你的页面是在移动端还是在PC端显示对应的页面代码,另一个隐藏。 1)判断你的页面是在移动端还是在PC端打开??function IsPC() { var userAgentInfo=navigator.userAgen
  • 移动端自适应解决方法小结

    千次阅读 2018-02-27 10:18:24
    一.百分比布局按照父布局的宽高进行百分比分隔,以此来确定视图的大小。但是要想设置当前容器的高度或宽度百分比,必须“明确”知道父容器的高度或宽度。...就会出现换行撑高元素,都会会影响到页面原本布局即使设置...
  • 将pc端的网页自适应显示在移动端

    万次阅读 2019-09-16 23:41:42
    这是因为移动端的浏览器默认的会将网页渲染在一个比例比较大的viewport中排版(ios默认的是980px,Android4.0以上为980px),然后通过比例缩放看到整个页面的全貌。 但是,使用默认的viewport布局会有以下缺点: ...
  • html移动端登录界面

    千次阅读 2019-04-25 23:25:10
    最近博主在开发一款app时,得到了几款app登录界面模板,在这里分享给大家,多说无益,直接上图: 在线演示地址:https://pengxiang1998.github.io/login/index/login.html 亦可联系我:2186527424 ......
  • element-ui移动端rem适配

    万次阅读 2018-10-09 17:18:25
    https://segmentfault.com/a/1190000015238394
  • 页面布局后,底部出现横向滚动条 解决方法: 1:查看是从哪个部位开始出现滚动条 2:给包裹的元素添加属性:box-sizing:border-box 3:整体包裹元素添加熟悉:box-sizing:border-box;overflow:auto; 具体在看...
  • 前言 眼看着做两顿凉皮的功夫,2020第一季度就要过完了。 过去的三个月,好像经历了很多,又好像什么都没留下。 这种茫然的背后,是我们特殊时期害怕被淘汰的一种自我审视。看到百度数据显示,疫情期间日均超3.5亿...
  • 移动端布局的几种方式

    千次阅读 2019-06-07 12:57:21
    rem适配原理 <script> (function(doc, win, designWidth) { const html = doc.documentElement; const refreshRem = () => { const clientWidth = ... if (clientWid...
1 2 3 4 5 ... 20
收藏数 28,677
精华内容 11,470
关键字:

移动端页面布局