导航

邯郸专业做网站建设公司,网页设计制作,百度优化推广

网站建设1500元全包。做完验收修改到满意为止可淘宝付款有保证!
当前位置: 邯郸网站建设 > 网页设计制作百科 > 常见问题 >

PC站改自适应网站@media属性根据不同屏幕宽度链接


来源:邯郸煜阳网络公司  时间:2018-12-21 06:19    
淘宝上一个企业网站客户只有PC电脑端的网站,要把网站改成自适应的,本来还点信心,但一问,有的要1万2 ,唉,天文数字,相给客户退款,但客户不干,非得给我要赔偿金,唉,一言难言,怎么办,硬着头改吧,遇到的第一个问题就是@media属性根据不同屏幕宽度链接不同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>


专业网站建设15
网站制作热线:133-6303-9260
总部地址:邯郸市义乌小商品批发城15楼09号
网站建设专线:0310-3208323
微信营销专线:1336-3039260
官方网站:www.alisoho.net

煜阳科技客服QQ
邯郸煜阳科技微信公众号
微信公众号扫一扫微信号:yywlkj2017
提供您的网站制作需求
欢迎与我们洽谈网站建设业务,您也可以在下面提交您的网站制作需求
我们将竭诚为您服务!
如何称呼:
联系方式:
联系地址:
建站需求: