CSS直接实现的响应式

CSS直接实现的响应式

http://www.mahaixiang.cn/wzsj/278.html


不只是用JS 判断屏幕大小 ,实现总体的BODY再调整rpx。

还有CSS直接控制的阑珊格和自动隐藏部分元素的 屏幕响应式。如layui


https://www.zhihu.com/question/20732368
大神表示:响应式不是某种技术,而是一种设计思想或者说设计策略。


简单说呢就针对不同的屏幕分辨率应用不同的CSS样式。比如在电脑、Pad设备上,屏幕比较宽,就可以一行放2个Div。

到了手机上,或者Pad竖着拿的的时候,一行就只放1个Div。

这里有2个关键点:

一是如何在不修改Dom结构的前提下调整布局。

二是如何判断屏幕分辨率并应用对应的CSS。

以上两点都应该不依赖与JS。

实现第一点依靠的是流式布局。就是所有参与布局的DIV都用float:left,宽度都用百分比表示。比如下图,黄色部分的宽度是60%,橘色宽度是40%。



CSS 实现的响应式:(推荐)---用JS那种判断宽度的实现方式只能只能处理div  和 字体比例     大小,不能响应布局。

http://geekplux.com/grid/  



posted @ 2017-12-02 17:06 Newman·Li 阅读( ...) 评论( ...) 编辑 收藏
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值