css自適應瀏覽器大小
1、屏幕 > 900px :顯示3列
2、450px < 屏幕 < 900px :顯示2列
3、屏幕 < 450px :顯示1列
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>自適應demo</title> </head> <style> .tul{ width:100%; float:left; padding-left:10px; box-sizing:border-box; } .tli{ border:1px solid #333; float:left; text-align:center; margin-right:8px; list-style:none; } .tli:last-child{ margin-right:0;} @media screen and (min-width:900px){ .tli{width:calc(33.33% - 10px); } } @media screen and (min-width:450px) and (max-width:900px){ .tli{width:calc(50% - 10px); } } @media screen and (max-width:450px){ .tli{width:calc(100% - 2px); } } </style> <body> <ul class="tul"> <li class="tli">aaaaaaa</li> <li class="tli">aaaaaaa</li> <li class="tli">aaaaaaa</li> </ul> </body> </html>