电话
13363039260
PC站改自适应网站@media属性根据不同屏幕宽度链接
2018-12-12 11:39 admin
淘宝上一个企业网站客户只有PC电脑端的网站，要把网站改成自适应的，本来还点信心，但一问，有的要1万2 ,唉，天文数字，相给客户退款，但客户不干，非得给我要赔偿金，唉，一言难言，怎么办，硬着头改吧，遇到的第一个问题就是@media属性根据不同屏幕宽度链接不同css文件的问题
<link rel="stylesheet" type="text/css" media="(min-width: 640px)" href="/cloud/css/lib2.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet" type="text/css" media="(min-width: 640px)" href="/cloud/css/lib2.css" />
<link rel="stylesheet" type="text/css" media="(min-width: 640px)" href="/cloud/css/style.3785.css" />
<link rel="stylesheet" type="text/css" media="(min-width: 640px)" href="/cloud/css/wblue.css" id="themeCssPath" />
<link rel="stylesheet" type="text/css" media="(min-width: 640px)" href="/cloud/css/3785.css" />
<style>
@media (min-width: 768px) {
.logo{text-align: left; margin: 0; padding-bottom: 30px; margin-top: 17px;}
.hotline{text-align: right; margin: 0; padding-bottom: 30px; margin-top: 17px;}
.project.mlist:not(.imagelink) .content_list .item_block .item_box .item_img, .project.module:not(.imagelink) .content_list .item_block .item_box .item_img {
width: 99%;
border: 1px #ccc solid;
}
.project.mlist:not(.imagelink) .content_list .item_block .item_box .item_img, .project.module:not(.imagelink) .content_list .item_block .item_box .item_img {
height: 150px;
border-radius: 4px;
}
}
@media (min-width: 992px) {
.logo{text-align: left; margin: 0; padding-bottom: 30px; margin-top: 17px;}
.hotline{text-align: right; margin: 0; padding-bottom: 30px; margin-top: 17px;}
}
@media (min-width: 1200px) {
.logo{text-align: left; margin: 0; padding-bottom: 30px; margin-top: 17px;}
.hotline{text-align: right; margin: 0; padding-bottom: 30px; margin-top: 17px;}
}
@media (max-width: 766px) {
.logo{text-align: left; margin: 0; padding-bottom: 0; margin-top: 0;}
}
.project.mlist:not(.imagelink) .content_list .item_block::before{ height:auto}
.project.mlist:not(.imagelink) .content_list .item_block .item_box .item_img, .project.module:not(.imagelink) .content_list .item_block .item_box .item_img{ width:374px; border: 1px #ccc solid;}
.news.mlist .content_list .item_img{float:left}
.warp{ width:1100px; margin:0 auto; position:relative;}
#homehead{ height:500px;position:relative}
#homehead .play{ background:#999;width:480px; height:313px; position:absolute; }
#homehead h1{ font-size:50px; line-height:65px; color:#fff; padding:5px 20px; font-weight:normal; text-shadow:#207aa8 1px 1px 1px; display:inline-block; position:absolute;left:495px}
#homehead h1.h1-01{ top:110px; left:495px}
#homehead h1.h1-02{ top:175px; left:495px}
#homehead h2{ font-size:14px;left:495px; line-height:24px; color:#fff;padding:10px 20px; top:155px;font-weight:normal; position:absolute;}
</style>
Tag： 网站
猜你喜欢
联络方式：
13363039260
微信二维码 