CSS5:移动端页面(响应式) (2)

历史原因:最开始手机浏览器(苹果三)会在自己的三四百像素的手机上模拟980像素的显示效果,然后让用户自己去缩放,查看网页.

那么就告诉浏览器不要缩放我的网页,手机屏幕是多少像素,就显示多少像素的网页.使用下面的代码

<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> name="viewport" :视口 content="width=device-width,宽度等于设备宽度,意思就是不要变成980,用设备宽度. user-scalable=no, 用户是否可以缩放:不许缩放,因为我在代码里已经给用户适配好了 initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" 初始缩放倍数,最大缩放倍数,最小缩放倍数,都是1.0,即使不能缩放

这句话缩写语法:
mate:vp

总结这个meta作用:

防止手机页面模拟 980 像素宽度

防止页面在用户双击的时候放大

防止用户两指缩放页面

3.移动端的特点 3.1flex布局是专门给手机定制的

只要学会flex布局,手机端布局基本OK手机端的交互方式不一样

3.2手机端的交互方式不一样

没有 hover

有 touch 事件
如何监听滑动事件?记录两次滑动时候的坐标,相减,就可以了.
有封装的库,例如jquery swipe, vue里的插件

没有 resize
手机端的宽度永远跟设备宽度一样

没有滚动条
滚动条会隐藏,会变成一个指示器,跟PC端不一样

没有ie,意思就是什么CSS属性都可以用,不用考虑兼容的问题

4.CSS3的calc()使用

链接:https://www.w3cplus.com/css3/...

平时在制作页面的时候，总会碰到有的元素是100%的宽度。众所周知，如果元素宽度为100%时，其自身不带其他盒模型属性设置还好，要是有别的，那将导致盒子撑破。比如说，有一个边框，或者说有margin和padding，这些都会让你的盒子撑破。我们换句话来说，如果你的元素宽度是100%时，只要你在元素中添加了border,padding,margin任何一值，都将会把元素盒子撑破（标准模式下，除IE怪异模式）。虽然前面介绍的CSS3属性中的box-sizing在一定程度上解决这样的问题，其实的calc()函数功能实现上面的效果来得更简单。

移动端页面布局常用哪些属性？

display: flex width: calc(50% - 10px);