网站布局中响应式布局

Posted 务必抓紧

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网站布局中响应式布局相关的知识,希望对你有一定的参考价值。

在页面大小发生变化的时候,让页面显示产生变化,可以使用响应式布局的方式。

例如:在html标签<div class = ‘c1‘>页面布局</div>中,想让其在大小变化达到某个值的时候,背景颜色也同时发生变化。

在css文件中添加

<style>

  .c1{

              background-color:grep;

        }
  //@media 意思是,在宽度大于700px的时候,应用@media 中的设置,当小于700px的时候,div标签应用c1效果。
      @media  (min-width:700px){

    background-color:red;
       }

</style>

在导入第三方模板后,比如bookstrap模板,想要对第三方模板的样式做修改的话,自己写的css应该放在第三方样式的下面,这样自己写的css才可生效。

如果自己写的CSS放在第三方样式的上面的话,如何让自己的样式生效呢,应该在自己写的样式后加上 !important

<link rel="stylesheet" href="bootstrap3.3.0-dist/css/bootstrap.css"/>
    <style>
        .no-radius{
            border-radius: 0;  !important;
        }
        
    </style>

 

以上是关于网站布局中响应式布局的主要内容,如果未能解决你的问题,请参考以下文章

普通网页怎么改成响应式布局

响应式布局

网站就必须用响应式布局吗?MVC视图展现模式之移动布局

网站布局中响应式布局

响应式布局

响应式布局