It used to be the case that everyone viewed webpages on about the same size screen. But with the explosion of the use of smartphones to access the Internet, the landscape of design has completely changed. People viewing your site will now expect that it will perform regardless of the platform (smartphone, tablet, laptop, or desktop computer). This ability to respond to any platform is called responsive design. This course will expand upon the basic knowledge of CSS3 to include topics such as wireframes, fluid design, media queries, and the use of existing styling paradigms such as Bootstrap. After the course, learners will be able to: ** Explain the mobile-first paradigm and the importance of wireframes in the design phase ** Create sites that behave across a range of platforms ** Utilize existing design frameworks such as Bootstrap This is the fourth course in the Web Design For Everybody specialization. A basic understanding of HTML and CSS is expected when you enroll in this class. Additional courses focus on adding interactivity with the JavaScript Programming Language and completing a capstone project.
Fluid Measurements
Loading...
来自 University of Michigan 的课程
Advanced Styling with Responsive Design
1156 个评分
University of Michigan
1156 个评分
课程 4（共 5 门，Specialization Web Design for Everybody (Basics of Web Development and Coding)）
从本节课中
Week One: Style with Responsive Design
What does it mean to have responsive design for your site? How can you tell if your existing site is responsive? This week we will begin with the theories behind the "mobile-first paradigm" - the idea that your mobile site should provide everything needed, not a pared-down version of a good page. We end the week by taking the first concrete step of using fluid measurements in your CSS.
与讲师见面
Colleen van Lent, Ph.D.Lecturer
School of Information
Charles SeveranceAssociate Professor
School of Information
Hi, everybody.
Today we're going to talk about fluid measurements.
They're really important to responsive design.
I've seen some really beautifully written and
spoken presentations on how important it is to have these fluid measurements.
And how the artistry of responsive design can make things just incredibly good.
Just the fact that I use the word good explains that I am not that eloquent.
So I'm going to do my best to show you the technical reasons why you want to use
fluid measurements.
The most important thing is that you really want to understand
that your content, it needs to fit in the size constraints of the viewport.
Don't try to make people use a certain size, it's your job to conform to them.
If you go to a page and
you have a lot of vertical scrolling where you have to go up and down, that's really
about content, it's not something that we're going to concern ourselves with.
If you have a lot of content, people are going to need to scroll.
What's bad,
what you really don't want is I hate when people have to do horizontal scrolling.
When you're on a page and everything doesn't fit in the screen so
you've got to kind of look for it.
We want to avoid that whenever possible.
First, let's talk about absolute measurements.
For many people,
these may be the only type of measurements they've used when doing web design.
And they do have their place, so let's talk about how we use them.
For the pixel, a pixel is basically a dot on your display.
1 pixel used to be equal to 1/96th of an inch,
I'm not sure that's even necessarily true at this point.
But I can tell you that screen sizes have a lot of pixels and
you want to think about that when you're trying to design on pixel size.
Another option is to use mm, cm, or in.
This stands for millimeter, centimeter, or inch.
And while it may seem odd to use this kind of measurements when
you're doing a webpage, don't forget, it is possible to print out your page.
And if you want something to be relative to an 8-and-a-half by 11 piece of paper,
it makes total sense to use these types of measurements.
Another option you can use is point.
And one point, it's equivalent of 1/72 of an inch.
So again, this is a very concrete measurement.
Another option you can use is pica.
And one pica is the equivalent of 12 points.
Again, these are all completely valid measurements and
they have their place when you're designing your page.
But as much as possible, we want to move to relative measurements,
where things are sized based either on their parents or
their neighbors or on the screen size, different things like that.
So let's start with percent.
Percentage values are always relative to some other value, for example, a length.
So if you say you want something to be 75%,
it's going to check the container it's in and make it 75% of that.
The measurement came up with its name because it wanted to be the font
size of the letter M element.
It seems a little bit odd, because when you first think about it,
it's going to be the same size by default.
If you use one it's going to be that same size.
1.1 will make it a little bit bigger, 10% bigger.
0.9 will make it smaller than the default size.
Another thing that you can use is rem.
rem is very similar to but
it helps avoid that problem of something getting smaller and smaller and smaller.
Let me show you an example.
Let's assume we're going to set something up to be 0.5em
And it's going to be inside this element in here.
I'm going to make up a size and I'm going to say, it's this big.
Okay, well, the problem is, if I have another element inside here,
the a is going to be only half as big as that a.
And if I have another a in here, it's going to be even smaller.
So when you use and you have things that are nested inside each other,
the font can actually get smaller and smaller and smaller.
And that might not be how you really want it to go.
If you use rem instead, 0.5em,
sorry, 0.5rem, I really need an eraser.
Instead, it's always going to be half the size based on the parent or
the root element.
So this a is going to be the exact same size and the exact size in here.
rem really helped people out when they were doing these kind of complex sites
where you had a lot of things embedded inside the other.
Now, the problem with teaching and
learning about relative measurements, is that it's very abstract.
So I tried to include a little thing here to help you make it a little clearer.
1em is basically the equivalent of 12 points, or 16 pixels, or 100%.
If you don't style your code in any way,
you can assume that some of these defaults will fall in.
So I've tried to include this little chart here to make it a little bit more clear.
In general, 1em is the equivalent of 12 points,
which is the same as 16 pixels, which is the same 100%.
So you could use any one of these four.
Now, the difference is, if you were to resize your screen and make it bigger or
smaller, only and percent would adjust to the size of the screen.
If you used point or pixel, as the screen gets bigger,
the font stays the exact same size.
Same if the screen gets smaller.
Two of the newer relative measurements are based on the viewport.
vw stands for viewport width, so if you were to use one vw, you're saying,
I want to use up 1/100th of the width of the viewport.
It used to be the case that you needed to use Javascript to go off,
find that width of the browser, return it, and do some math there.
Now, we can just use it with vw.
In the same way, you can use vh for viewport height.
The viewport's height is 1/100th of the height of the viewport.
So if you're on a screen, you'll know exactly how much real estate you have if
you want something to show up exactly in the middle.
This comes in really handy when you're trying to set headers and
footers in specific positions.
Now, there are times that you're going to want to hardcode values with those
absolute measurements.
But, whenever possible, when you're coming up with your design, figure out,
are you going to need that font, or that image, or
that section to resize depending upon the viewport?
Then, you want to use these fluid and relative measurements.
And I can't stress enough that you're not really going to understand how they work
until you take some time, play with the code and
just kind of see what you can make it do.
For that reason, our next video is going to be an example
of me moving from absolute to relative measurements.
