首页 > 网站技术 > css3技术 时代sdcms网站模板网

网页在手机上不会相应了怎么办?css响应式代码

作者:时代sdcms网站模板网 更新:2019-03-06 14:44:42 评论 来源:sdcms模板 人气:0

@media screen and (min-width:1200px){

#page{ width: 1100px; }

        在这里写当浏览器宽度最小1200px以上时的css代码

}

@media screen and (min-width: 960px) and (max-width: 1199px) {

#page{ width: 960px; }

        在这里写当浏览器宽度在960 - 1199px以内时的css代码

}

@media screen and (min-width: 768px) and (max-width: 959px) {

#page{ width: 900px; }

        在这里写当浏览器宽度在768 -  959px以内时的css代码

}

@media only screen and (min-width: 480px) and (max-width: 767px){

#page{ width: 450px; }

        在这里写当浏览器宽度在490 - 767px以内时的css代码

}

@media only screen and (max-width: 489px) {

#page{ width: 300px; }

        在这里写当浏览器宽度在489px以下时的css代码

}

响应式网页的头部必须添加,否则在手机端不会自动实现响应式布局:

     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 

这样才能实现响应式效果



时代sdcms网站模板 - 一个用心制作sdcms网站模板的网站

在这里,您不仅能购买到当下最优质的sdcms网站模板,同时也能为您提供sdcms程序修改、二次开发等功能定制,以及sdcms系统或模板bug修复,本站将全心全意为您提供完美服务和售后,欢迎收藏本站。