Difference between revisions of "Team:Tianjin/Team/css/responsive.css"

(Created page with "html {    -webkit-text-size-adjust: none; } .video embed, .video object, .video iframe {    width: 100%;    height: auto; } img{ max-width:100%; height: auto;   ...")
 
 
Line 1: Line 1:
−
html {
+
html{
−
   -webkit-text-size-adjust: none;
+
  -webkit-text-size-adjust: none;
 
}
 
}
 
.video embed,
 
.video embed,
 
.video object,
 
.video object,
−
.video iframe {
+
.video iframe{
−
   width: 100%;
+
  width: 100%;
−
   height: auto;
+
  height: auto;
 
}
 
}
 
img{
 
img{
−
max-width:100%;
+
  max-width:100%;
−
height: auto;
+
  height: auto;
−
    width: auto\9; /* ie8 */
+
  width: auto\9;
 +
 
 
}
 
}
−
 
+
@media only screen and (min-width: 768px) and (max-width: 959px){
−
@media only screen and (min-width: 768px) and (max-width: 959px) {
+
 
−
/* -------------------------------------------- */
+
−
/* ------------------Header-------------------- */
+
 
 
−
/* -------------------------------------------- */
+
}
−
/* ------------------Content------------------- */
+
@media only screen and (max-width: 767px){
−
+
 
−
/* -------------------------------------------- */
+
−
/* ------------------Footer-------------------- */
+
−
+
−
/* -------------------------------------------- */
+
−
/* ------------------Other----------------*---- */
+
 
 
 +
header{
 +
  margin-top: 0px;
 +
  height:150px;
 +
}
 +
header #logo{
 +
  top:20px;
 
}
 
}
  
−
@media only screen and (max-width: 767px) {
 
−
/* -------------------------------------------- */
 
−
/* ------------------Header-------------------- */
 
−
header {margin-top: 0px;height:150px;}
 
−
header #logo{top:20px;}
 
 
 
−
/* -------------------------------------------- */
+
}
−
/* ------------------Featured------------------ */
+
@media only screen and (min-width: 620px) and (max-width: 767px){
 +
 
 
 
−
/* -------------------------------------------- */
+
}
−
/* ------------------Content------------------- */
+
@media only screen and (min-width: 480px) and (max-width: 619px){
−
+
 
−
/* -------------------------------------------- */
+
−
/* ------------------Footer-------------------- */
+
 
 
−
/* -------------------------------------------- */
 
−
/* ------------------Other----------------*---- */
 
 
}
 
}
−
 
+
@media only screen and (max-width: 479px){
−
@media only screen and (min-width: 620px) and (max-width: 767px) {
+
 
−
/* -------------------------------------------- */
+
−
/* ------------------Header-------------------- */
+
 
 
−
/* -------------------------------------------- */
+
header{
−
/* ------------------Content------------------- */
+
  height: 170px;
−
+
}
−
/* -------------------------------------------- */
+
header #logo{
−
/* ------------------Footer-------------------- */
+
  top:20px;
−
+
}
−
/* -------------------------------------------- */
+
header #search{
−
/* ------------------Other----------------*---- */
+
  bottom: 15px;
 +
  width: 230px;
 +
  top:auto;
 +
  left: 5px;
 +
}
 +
header #search input{
 +
  width: 194px;
 +
}
 +
.menu{
 +
  display:none;
 +
}
 +
.minimenu{
 +
  display:block;
 +
}
 +
#main-content .comment input, #main-content .comment textarea{
 +
  width:90%;
 
}
 
}
  
−
@media only screen and (min-width: 480px) and (max-width: 619px) {
 
−
/* -------------------------------------------- */
 
−
/* ------------------Header-------------------- */
 
 
 
−
/* -------------------------------------------- */
 
−
/* ------------------Content------------------- */
 
−
 
−
/* -------------------------------------------- */
 
−
/* ------------------Footer-------------------- */
 
−
 
−
/* -------------------------------------------- */
 
−
/* ------------------Other----------------*---- */
 
−
}
 
  
−
@media only screen and (max-width: 479px) {
 
−
/* -------------------------------------------- */
 
−
/* ------------------Header-------------------- */
 
−
header{height: 170px;}
 
−
header #logo{top:20px;}
 
−
header #search{bottom: 15px; width: 230px; top:auto; left: 5px;}
 
−
header #search input{width: 194px;}
 
−
 
−
.menu{display:none;}
 
−
.minimenu{display:block;}
 
−
 
−
#main-content .comment input, #main-content .comment textarea{width:90%;}
 
−
/* -------------------------------------------- */
 
−
/* ------------------Content------------------- */
 
−
 
−
/* -------------------------------------------- */
 
−
/* ------------------Footer-------------------- */
 
−
 
−
/* -------------------------------------------- */
 
−
/* ------------------Other----------------*---- */
 
 
}
 
}

Latest revision as of 01:31, 13 September 2016

html{ 

 -webkit-text-size-adjust: none;

} .video embed, .video object, .video iframe{ 

 width: 100%;
 height: auto;

} img{ 

 max-width:100%;
 height: auto;
 width: auto\9;

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


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


header{ 

 margin-top: 0px;
 height:150px;

} header #logo{ 

 top:20px;

}


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


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


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


header{ 

 height: 170px;

} header #logo{ 

 top:20px;

} header #search{ 

 bottom: 15px;
 width: 230px;
 top:auto;
 left: 5px;

} header #search input{ 

 width: 194px;

} .menu{ 

 display:none;

} .minimenu{ 

 display:block;

}

  1. main-content .comment input, #main-content .comment textarea{
 width:90%;

}


}