Can we make our website fully responsive while using CSS, none of other thing should we use.
Yes, you can use media breakpoints in css as follows
320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more — Extra large screens, TV
for example
#media (max-width: 480px) {
.text {
font-size: 16px;
}
}
For more information, please visit the following link:
https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/
If you're looking at only using CSS for responsiveness, I would recommend reading up on media queries. They're like if functions for css.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://css-tricks.com/a-complete-guide-to-css-media-queries/
Related
I was checking the responsiveness of the site but this is not supportive on Epiphany browser. Can someone suggest me what changes should i do so that it becomes fully responsive on Epiphany? Thanks in advance
I think you can use media queries for the responsive website.
#media only screen and (max-width:768px) and (min-width:200px)
{
/* Your CSS Code */
}
My main smartphone is a Galaxy S8 Plus.
The media queries for this device are:
#media only screen and (min-width: 360px) and (orientation: portrait)
Let's start with the portrait orientation. This one, I'm understanding 100%, but here comes the problem.
This is the media query for landscape:
#media only screen and (min-width: 740px) and (orientation: landscape)
Everytime I code in this media query it applies to my desktop which has a 1920 * 1200 resolution. I know it's influenced by the min-width: 740px.
Now, my question is are:
How do I tackle this problem?
Can I create a single query that covers both portrait and landscape?
If so , what are the best practices for units in responsive web design? Right now I'm using vh and vw in my project, but I think it creates a mess sometimes.
And one last question: how do I cover most devices out there with a minimal use of queries?
Good CSS is minimal. Test my approach:
Global styles on top. For example font colors, font weights, backgrounds etc.
Then, use media queries:
#media screen and (max-width:1200px){
}
#media screen and (max-width:992px){
}
#media screen and (max-width:640px){
}
and so on... Higher widths are on top. In "mobile-first" approach, use min-width, and then lower widths are on top.
Try to avoid orientation property. Use this property only when you really need it.
vw and vh are convenient but remember that they are not supported on older browsers.
Bootstrap is good framework but you should learn how to make logic CSS from the scratch first. Keep up the good work.
To deal with the problem that it applies to desktop change min to max, there is a "standard" for what the media queries should be seen here, your media query described the medium size of < 768px for horizontal and very small size of < 576px
You don't need to include the orientation, you can simply write #media only screen and (min-width: 740px) then you apply for both, but you should have two media queries to make sure you cover both
vh and vw work best for creating responsive design, however if you are coding for IE then it might a problem, and you will need to find an alternativ to calculating height
Use Boostrap, it does everything for you almost
I want to make a website where I'm using an "accordian" as my design for big screen devices (>750px) and I want to use a different design (Normal Buttons) for small devices.
I have studied how to apply diff css design for different screen size but don't know what to do if even my html content is different.
Can anyone please help me with how my html syntax should be for these two different contents ?
If you want different html what you can do is make 2 parts of content that are basicly the same but
#media screen and (min-width: 750px){
.smallClass{
display:none;
{
.bigClass{
display:block;
{
}
That way it switches between the blocks depending on your screen width
You can use media queries to adjust CSS rules to different screen sizes.
This is an example with a class named "testClass"
#media screen and (max-width: 650px){
.testClass{
color: blue;
{
}
I created a simple page with Axure in 2 versions (basically 2 adaptive views: base and 768 and below). When I generate the html, it works fine and follows the adaptive views. But this seems to work only with javascript, is there a way to deal with/generate the adaptive views in css? This could help me later on integrating the Axure generated html and css into my responsive design based on bootstrap. Thank you.
Pretty sure you're asking about responsiveness according to screen size. Bootstrap is built around these principles and the responsiveness is done purely through CSS using #media queries. All CSS starts on the smallest possible screen and then you can adjust your CSS to change as the screen size gets larger by placing # media queries at the bottom of your stylesheet. They are as follows:
#media (min-width:768px) {
This is where your CSS for anything above 768px goes
}
#media (min-width:992px) {
This is where your CSS for anything above 992px goes
}
#media (min-width:1200px) {
This is where your CSS for anything above 1200px goes
}
You can also use max-width in media queries
I'm using media queries in my css:
/* Tablet */
#media (max-width: 979px){
}
/* Phone */
#media (max-width: 767px){
}
When I drag my browser really small on my desktop computer it switches to the phone layout, is there a way to prevent this so the small size is only seen on the phone?
There isn't really a need to do this. This is the point of responsive, it's device-agnostic. So if a user comes to your site on desktop but their browser is really skinny the content will fit it (such as the Windows 8 Metro IE10 sidebar thing). You don't want to limit it only to phones, once you've done that you're going down a road that isn't meant to be traveled with responsive.
Sure you can, but the question is you really think the overkill need for it will be valid?
You can add a class to the HTML tag for phone devices (using JavaScript or any other method to verify if its a phone or not) and use this class inside the #media so only when this class is applied the media queries will take effect, small example:
HTML:
<html class="phone-device">
</html>
CSS:
/* Phone */
#media (max-width: 767px){
.phone-device{
}
}
But again this is not the right thing to do...