標籤：url 方法 code title lin char css 響應式 ati
響應式布局
外部link的max.css
#left { width: 50%; height: 100px; background-color: #FF6600; float: left;}#right { width: 50%; height: 100px; background-color: #3565ff; float: left;}
外部link的min.css
#left { width: 100%; height: 100px; background-color: #FF6600;}#right { width: 100%; height: 100px; background-color: #3565ff;}
代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!--第一種方法--> <!--<style> /*!*當裝置寬度大於900的時候，採用該樣式*! @media (min-width: 900px) { } !*當裝置寬度小於900的時候，採用該樣式*! @media (max-width: 900px) { }*/ </style>--> <!--第二種方法--> <!--<style> @import url(../../css/max.css) all and (min-width:900px); @import url(../../css/min.css) all and (max-width:900px); </style>--> <!--第三種方法--> <link rel="stylesheet" href="../../css/max.css" media="all and (min-width:900px)"> <link rel="stylesheet" href="../../css/min.css" media="all and (max-width:900px)"> <title>響應式布局</title></head><body><div id="left"></div><div id="right"></div></body></html>
運行圖
CSS之響應式布局
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
