媒体查询修复问题 [英] Media Queries fix issue

问题描述

我做了一些简单的媒体查询并加载到网站中，但是当我刷新页面时，由于媒体查询css网站的原始CSS也令人不安，请提出确切和正确的解决方案，如何按照移动宽度以及其他方式修复媒体查询在网站中包含这些查询的方式，这样我就可以创建一个适当的响应式网站.

I made some simple media queries and load in website but when I refresh the page so because of media queries css website orignal css also disturbing, please suggest the exact and proper solution how I fix the media queries as per mobile widths and also including way of these queries in website so I can make a proper responsive website.

有关其他建议，我分享了CSS代码

For more suggestion I share css code

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 480px)
body {
    background-color:white;
}

#columnout {
    background:none;
    background-color:#0090d7;
    width: 300px;
    height: 200px;
    margin-top: 210px;
    position:absolute;
    z-index:100;
}

#column{

    width: auto;
    height: auto;
    text-align: right;
    margin-left: 47px;
    z-index: 1; 
    margin-top: -29px;

}

推荐答案

在媒体查询中添加{}:

@media only screen and (max-width : 480px){
body {
  background-color:white;
}

#columnout {
  background:none;
  background-color:#0090d7;
  width: 300px;
  height: 200px;
  margin-top: 210px;
  position:absolute;
  z-index:100;
}

#column{

  width: auto;
  height: auto;
  text-align: right;
  margin-left: 47px;
  z-index: 1; 
  margin-top: -29px;

}
}

有关更多详细信息，请参见以下链接:

For more details please see this link: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

这篇关于媒体查询修复问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！