移动端要点

1.完整的meta设置:

width=device-width 约束视口为出厂视口
initial-scale=1.0 默认视口1.0倍
minimum-scale=1.0 允许最小的视口1.0倍
maximum-scale=1.0 允许最大的视口1.0倍
user-scalable=no 不允许用户缩放视口
2.百分比布局:
1).子盒子占父盒子的百分比,无视父盒子的padding
比如:

<div>
    <p></p>
</div>
div{width:600px;padding-left:100px;}
p{width:50%;}

此时p应该是300px宽度,因为无视父亲的padding。
2). 而padding,都参考父亲的width。注意,竖直方向上的padding也是看父亲的width,而不是height
例如:

<div>
    <main></main>
</div>

div{
   width:800px;
   padding-left:400px;
   padding:153px 234px 341px;
}

padding全都是父盒子宽度的百分之多少

p{
   width:50%; //400px
   height:100px;   
   padding-left:10%;  //80px
   paading-right:10%; //80px
   padding-top:10%; //80px
   padding-bottom:10%;  80px
}

3).margin,一律参考父亲width,不参考父亲的margin和height。
例如:

<div>
    <main></main>
</div>
div{
    width: 200px;
    height: 600px;
    border: 10% solid #000;
}
p{
    margin: 10%;
}
总结: 无论margin、padding、width、height,无论竖直方向还是水平方向,参考的都是父亲的width。 4)边框带来的麻烦。 因为边框不能用百分比来写,所以会带来麻烦。

1

→ float: left;width:50%; border:1px solid red;

2

→ float: left;width:50%; border:1px solid red;
p就不能浮动成功,因为总宽度已经是100%多了4个px。 此时边框不能写成百分比,所以就不好减!
        div{
            width: 80%;
            height: 200px;
            margin: 0 auto;
            background-color: #eee;
        }
        p{
            float: left;
            width: 50%;→ 这里不能轻松减去2px
            height: 200px;
            background: orange;
            border: 1px solid #000;
        }

解决方法:CSS3中增加了calc函数:

        div{
            width: 80%;
            height: 200px;
            margin: 0 auto;
            background-color: #eee;
        }
        p{
            float: left;
            **width: calc(50% - 2px);→ CSS3中增加了calc函数**
            height: 200px;
            background: orange;
            border: 1px solid #000;
        }

5).原来的盒模型都是外扩的有了padding和margin之后,css3新的盒模型,加上box-sizing: border-box;属性,盒模型就是内减的,这个属性兼容性很好,兼容到IE8,其他高级浏览器都兼容。
6)新的弹性盒属性display:box;和display:flex;
当div设置了display:box;的时候,子盒子自动就会并排!不要写浮动,写了浮动反而出错。
浏览器会自动检测总份数,每个份数占多少,你自己占了几份。不用需要计算8.3333%、16.666%了。这个属性能够颠覆百分比写法!CSS中从此不出现百分号了。并且这个属性足够优秀,margin能够自动减去,border也能自动减去。
这个属性还有一个分支display:flex;给父盒子添加的属性。
可以使用flex-direction来设置方向,值有四个:row、row-reverse、column、column-reverse;
flex-wrap : wrap;来设置自动换行;
设置对齐方式:justify-content:flex:end;justify-content:flex:space-between;,justify-content:flex:space-around;
设置顺序:

<div>
    <p>A</p>  → order:5;
    <p>B</p>  → order:1;
    <p>C</p>
    <p>D</p>
    <p>E</p>
    <p>F</p>  → order:2
</div>

flex-grow属性当空间多余是否外延:1是 0否(默认)
flex-shrink属性当空间不足是否缩小:1是(默认) 0否
用flex-basis:25%;属性表示占有多少面积,和width一致。
7)固比固:
三个盒子并排撑满父亲,两头的盒子固定120px尺寸,中间的盒子撑满剩余部分。
方法1:

<div>→ 相对定位,携带padding
    <p>A</p> → 绝对定位,top:0;left:0;
    <p>B</p>→ width:100%;
    <p>C</p>→ 绝对定位,top:0;right:0;
</div>

方法2:在display:-webkit-box;

<div>→ display:-webkit-box;
    <p>A</p> → width:120px; 没有box-flex属性
    <p>B</p>→  -webkit-box-flex:任意数值。
    <p>C</p>→ width:120px; 没有box-flex属性
</div>

8)高度的等比例变化:
a.插入图片法:
一般来说,需要高度等比例变化的盒子,都是携带图片的,因为不希望图片变形,所以盒子要等比例变化。
而img标签天生具有等比例的性质。盒子约束图片的宽度,图片反着影响盒子的高度。
比如现在要制作三个1:1:1的盒子并排,并且他们的宽高比都是1:1,也就是正方形。

<div>→ width:80%; overflow:hidden;
    <p>→ float:left;width:33.33%;
        <img src="images/yangyang.png" alt="">→ width:100%;height:auto;
    </p>
    <p>→ float:left;width:33.33%;
        <img src="images/liyifeng.png" alt="">→ width:100%;height:auto;
    </p>
    <p>→ float:left;width:33.33%;
        <img src="images/xiaoming.png" alt=""> → width:100%;height:auto;
    </p>
</div>

图片的height会算出小数,但是盒子不会自动撑满为小数,此时会有白边,最简单的方法就是给img加上一个vertical-align: middle;属性和overflow:hidden;
b.padding法,将图片放在padding里面;

<div>
        <p><img src="images/liyifeng.png" alt=""></p>
        <p><img src="images/liyifeng.png" alt=""></p>
        <p><img src="images/liyifeng.png" alt=""></p>
</div>

竖直方向的padding参考的是父亲的width,所以padding的参考和width的参考统一了,所以就能够制作高度等比例变化的盒子了!
盒子高度设置为0,width:33.3%;padding-top:33.3%;这两个参考的都是父盒子的宽度,所以值是一样的,然后再给子盒子设置width:100%;height:100%;

div{
width: 80%;
margin: 0 auto;
border: 1px solid #000;
overflow: hidden;
}
div p{
float: left;
width: 33.333%;
padding-top: 33.333%;
height: 0px;
border: 1px solid #000;
box-sizing:border-box;
position: relative;
}
div p img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

c).CSS3中增加了rem单位,是绝对单位,表示html根元素的字号的多少倍。
rem的使用:首先增加根字号

html{
 font-size: 20px;
 }
<script type="text/javascript">
    set();

    window.onresize = set;

function set(){
            //窗口此时的宽度
var windowWidth = document.documentElement.clientWidth;
            //倍数
var rate = windowWidth / 600;
            //设置此时的字号
document.documentElement.style.fontSize = 20 * rate + "px";
}
</script>
<script type="text/javascript">
function setHTMLFontSise(){
var windowWidth = document.documentElement.clientWidth;
//判断视口宽度是不是已经大于了最大版心
if(windowWidth > 540){
document.documentElement.style.fontSize = "20px";
}else if(windowWidth < 320){
document.documentElement.style.fontSize = 320 / 540 * 20 + "px";

}else{
document.documentElement.style.fontSize =  windowWidth / 540 * 20 + "px";
}

}

window.onresize = setHTMLFontSise;
setHTMLFontSise();
</script>

背景定位、background-size都能够用rem写:

.logo{
    border: 1px solid #000;
    width: 5rem;
    height: 4rem;
    background: url(images/icons.png) no-repeat -8rem -3rem;
    background-size: 15rem 10rem;
 }

9)移动端注意事项:
手机中的图片一般都要缩小2倍~3倍使用,这样可以充分利用手机的高清屏幕,让图片更清晰。
10)文字溢出自动省略号
单行省略号:

div{
            /*溢出加省略号*/
            text-overflow:ellipsis;
            /*设置文本不换行,即使横向溢出,也不换行*/
            white-space: nowrap;
            /*隐藏*/
            overflow: hidden;
        }

多行省略号,五个属性缺一不可:

section{
            /*溢出加省略号*/
            text-overflow:ellipsis;
            /*隐藏*/
            overflow: hidden;
            /*必须自己是弹性盒*/
            display: -webkit-box;
            /*设置行数是3行*/
            -webkit-line-clamp: 3;
            /*垂直排列*/
            -webkit-box-orient: vertical;
        }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值