Css For Different Device Sizes
Solution 1:
You have multiple choice: using Bootstrap to easily display your grid in different ways on window resize. You can also use media queries, combine with a grid layout like Flexbox or Grid. Or even use Jquery and the windworesize function. Personnaly, i would choose Flexbox and the flex-direction propriety when the window reach the size of a smartphone or tablet. To write a media querie, you just have to type something like @media screen and (max-width: 640px) for instance and write your rules inside the curly brackets.
Solution 2:
Here is a sample code.
<!DOCTYPE html><html><head><style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-size: 16px;
line-height: 22px;
font-family: Arial, Helvetica, sans-serif;
background-color: #f5f5f5;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.my-form {
width: 100%;
max-width: 920px;
margin: 0 auto;
padding: 20px;
}
.my-form.input {
width: 100%;
padding: 10px;
}
.my-form.input.left {
display: block;
width: 100%;
line-height: 24px;
padding: 3px0;
margin-bottom: 5px;
}
.my-form.input.right {
width: 100%;
}
.my-form.inputinput[type='text'], .my-form.inputinput[type='email'], .my-form.inputtextarea {
display: block;
width: 100%;
height: 30px;
font-size: 16px;
padding: 3px;
line-height: 22px;
border: 1px solid rgba(0,0,0,.3);
}
.my-form.inputtextarea {
height: auto;
min-height: 60px;
resize: vertical;
}
.my-form.inputinput[type='submit'] {
display: block;
width: 100%;
padding: 15px;
background-color: navy;
color: #ffffff;
font-size: 16px;
line-height: 22px;
}
@media screen and (max-width: 1024px) {
.my-form.input:after {
content: "";
clear: both;
display: table;
}
.my-form.input.left {
float: left;
width: 35%;
padding-right: 10px;
margin-bottom: 0;
}
.my-form.input.right {
float: right;
width: 65%;
}
}
</style></head><body><formclass="my-form"><divclass="input"><labelclass="left"for="firstname">
First name:
</label><divclass="right"><inputtype="text"id="firstname"name="firstname" /></div></div><divclass="input"><labelclass="left"for="lastname">
Last name:
</label><divclass="right"><inputtype="text"id="lastname"name="lastname" /></div></div><divclass="input"><labelclass="left"for="email">
Email Address:
</label><divclass="right"><inputtype="email"id="email"name="email" /></div></div><divclass="input"><labelclass="left"for="address">
Address:
</label><divclass="right"><textareacols="10"rows="5"id="address"name="address"></textarea></div></div><divclass="input"><divclass="left"></div><divclass="right"><labelfor="oneyear"><inputtype="checkbox"id="oneyear"name="oneyear" /> I've practiced yoga for at least one year:</label></div></div><divclass="input"><inputtype="submit"name="submit"value="submit" /></div></form></body></html>Solution 3:
You need Media Query for this. Media query is basically writing different CSS for devices with different widths. You can learn more from here- https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Also check out this article- https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can also use jQuery for the same using matchmedia.. Here is a JSbin example for you- https://jsbin.com/kutacuzece/edit
(function($) {
/*
* We need to turn it into a function.
* To apply the changes both on document ready and when we resize the browser.
*/functionmediaSize() {
/* Set the matchMedia */if (window.matchMedia('(min-width: 768px)').matches) {
/* Changes when we reach the min-width */
$('body').css('background', '#222');
$('strong').css('color', 'tomato');
} else {
/* Reset for CSS changes – Still need a better way to do this! */
$('body, strong').removeAttr('style');
}
};
/* Call the function */mediaSize();
/* Attach the function to the resize event listener */window.addEventListener('resize', mediaSize, false);
})(jQuery);
OR you can use something as simple as this-
if ($(window).width() < 960) {
$(selector).css({property:value, property:value, ...})
}
else if ($(window).width() < 768) {
$(selector).css({property:value, property:value, ...})
}
else {
$(selector).css({property:value, property:value, ...})
}
Post a Comment for "Css For Different Device Sizes"