javascript - how to assign a css value for mobile and desktop in one line - Stack Overflow

admin管理员组

文章数量:1425733

I have HTML div with width of 190 px that's working normal for desktop but for mobile its not , is there a way to tell if connection is from desktop take this value else take this value ?

this is my code :

document.querySelector('.article').style.width ='190px';

I have HTML div with width of 190 px that's working normal for desktop but for mobile its not , is there a way to tell if connection is from desktop take this value else take this value ?

this is my code :

document.querySelector('.article').style.width ='190px';

• javascript
• css
• responsive-design
• media-queries

Share Improve this question Follow edited Jan 18, 2019 at 13:05 sayalok 92033 gold badges1515 silver badges3030 bronze badges asked Jan 18, 2019 at 12:09 salmanaacvfsalmanaacvf 25799 silver badges2525 bronze badges 4

• You might want to check device resolution, not type. – Prajwal Commented Jan 18, 2019 at 12:10
• 9 Meet Media Queries – Mitya Commented Jan 18, 2019 at 12:11
• You can check out this reference stackoverflow./questions/3514784/… – Varun Setia Commented Jan 18, 2019 at 12:12
• To clarify, if you set the width on the .article class instead of adding it inline, you can use a media query to state that .article has to be 190px when the screen is bigger than x and that .article is like 100% width when the screen is smaller than X. – Shilly Commented Jan 18, 2019 at 12:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

In your css file

// Desktop
.article {
    width: 100px;
}


// Mobile
@media only screen and (max-width: 768px) {
    .article {
        width: 50px;
    }
}

This are Media Queries.

In the first lines, we don't have any limitation, but then you override the current value ONLY when the width of the screen is lower than 768px

Just use media Queries which is the best option to make the things responsive . Otherwise you can have a look at flexbox which is awesome flexbox

Use Media Queries

Using a breakpoint of 576px targets all kinds of mobile devices.

// This is the default size
.article {
   width: 100px;
}


// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { 
  width: 200px;
}

---

The other answer targets tablets too. But if you want to target mobile only, use my solution.

本文标签： javascripthow to assign a css value for mobile and desktop in one lineStack Overflow