列表的响应式排版
2018-06-24 00:17:26来源:未知 阅读 ()
效果展示:
一、每行固定个数:保证排版的美观
.list li{ width:20%;display:inline-block; *display:inline;*zoom:1;overflow:hidden; }
二、随页面宽度调整个数和大小:保证图文的可读性
.list li{ width:20%;display:inline-block; *display:inline;*zoom:1;overflow:hidden; }
1、媒体查询控制宽度
@media screen and (max-width:1280px){ .list-table1 li{width:25%} } @media screen and (max-width:600px){ .list-table1 li{width:33.3%} } @media screen and (max-width:400px){ .list-table1 li{width:50%} }
方便、但存在兼容性
2、JS控制
$(window).resize(function () { resizeList(); }) function resizeList(){ var s_width=$(window).width(); //console.log("s_width:"+s_width); if(s_width>600 && s_width <=1280) { $(".list-table1 li").css("width","25%"); }else if(s_width>400 && s_width <=600){ $(".list-table1 li").css("width","33.3%"); }else if(s_width>200 && s_width <=400){ $(".list-table1 li").css("width","50%"); }else if(s_width<=200){ $(".list-table1 li").css("width","100%"); } }
$(window).resize()实时获取浏览器的宽度
注意事项:
1、图片不变形
.a-common{width:auto;height:auto;} .a-common img{width:100%;height:auto;}
2、文字溢出处理
.title, .subtitle{ width:auto;text-align:center; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; }
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash