I have written a piece of CSS code to fluidly switch my site layout's width based on the user's screen width. If the user has less screen estate available, the layout's width increases to fill more of the window and leave less whitespace, and if they have more space, the layout shrinks to maintain an appealing look.
I use the following code to achieve this:
#bg{
background:-webkit-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
background:-moz-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
background:-o-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
background:linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
margin-left:auto;
margin-right:auto;
margin-bottom:1.6rem;
border-width:0 0.1rem 0.1rem 0.1rem;
border-style:solid;
border-color:#303030 #101010 #000;
border-radius:0.8rem;
min-width:94.2rem
}
@media (min-width: 70rem){
#bg{
border-radius:4px;
border-radius:0.4rem;
width:90%
}
}
@media (min-width: 91rem){
#bg{
width:80%
}
}
@media (min-width: 112rem){
#bg{
width:70%
}
}
This works just fine in Firefox 30, however Google Chrome always displays the element at 70% width.
Previously, I had also used max-width in the queries, in which case Chrome would do the inverse thing; it would always display the element at 90%, no matter how much I resize the browser window.
The rules are compiled using SASS. What exactly is the problem here? How can I alter the query to work in all browsers?
The affected website can be found at this link.
add this line in <head>
<meta name="viewport" content="width=device-width,initial-scale=1">
See if this more usual syntax works better:
@media screen and (min-width: 112rem){ ... }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
background:green;
}
@media only screen and (max-width: 500px) {
body{
background:yellow;
}
}
</style>
</head>
<body>
</body>
</html>
All are correct, but Chech this
@media only screen and (min-width : 320px) {...}
NOT
@media screen and (min-width: 320px){ ... }
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
please close your code with ';' and try this
@media (min-width: 70rem){
#bg{
border-radius:4px !important;
border-radius:0.4rem !important;
width:90% !important;
}
You can tweak this to your needs
// css for mobile here
// ...
/* desktop */
@media (min-width: 900px) and (orientation: landscape)
{
// css for desktop here
// ...
}
And don't forget
<meta name="viewport" content="width=device-width, initial-scale=1">
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://img.manongdao.com/sparkler-677774__340.jpg', '推荐 聊天终结者 的文章《Responsive media query not working in Google Chrom》','https://www.manongdao.com/article-956668.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}