2018-04-01 移动端页面(响应式)

1、媒体查询


2018-04-01 移动端页面(响应式)_第1张图片
image.png

2018-04-01 移动端页面(响应式)_第2张图片
image.png

还可以换一种方式

2018-04-01 移动端页面(响应式)_第3张图片
image.png
即用文件来代替内容
举个例子看
https://www.smashingmagazine.com/
所谓响应式,就是页面尺寸变了之后,页面样式也跟着变
2、问设计师要设计图

3、学会隐藏元素

需求:刚开始
image.png

当尺寸缩小之后,变成
image.png

logo不变,但是导航变成了一个按钮,需要点一下才显示


image.png

如果先设计手机页面,就叫mobile-first,如果先设计PC桌面,就叫desktop-first
推荐mobile-first
yy.classList.toggle('active')
toggle这个

另外一个思路:根据不同的设备(尺寸),使用不同的代码(各一套CSS+html等)
2018-04-01 移动端页面(响应式)_第4张图片
image.png

后端去实现
另外一种思路:根据不同的设备跳转不同的页面

image.png

用374去模拟980,然后进行缩放

告诉浏览器别去缩放
加一句


2018-04-01 移动端页面(响应式)_第5张图片
image.png

4、移动端的特点
4.1、手机上没有hover
4.2、有touch事件(怎么知道用户在滑动呢?),根据2点触摸坐标的差值来判断
https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

4.3、没有resize,没有放大和缩小
4.4、没有滚动条

你可能感兴趣的:(2018-04-01 移动端页面(响应式))