Code With Me: Fluid Measurements

Loading...

来自 University of Michigan 的课程

Advanced Styling with Responsive Design

1094 个评分

University of Michigan

Advanced Styling with Responsive Design

1094 个评分

课程 4（共 5 门，Specialization Web Design for Everybody (Basics of Web Development and Coding)）

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.

从本节课中

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.

What is Responsive Design?5:16

Testing Existing Sites6:11

Benefits of Responsive Design4:57

Fluid Measurements7:25

Code With Me: Fluid Measurements5:35

与讲师见面

Colleen van Lent, Ph.D.
Lecturer
School of Information
Charles Severance
Associate Professor
School of Information

One of the things we always talk about is that there's a real difference between

sitting and listening to me talk about something, and getting in there and

coding it yourself, or at least following along with me while I code it.

So let's do an example as we go from static or

absolute measurements to something that's more fluid.

So what I have here is a site where I've used absolute measurements

to lay everything out.

I have a large screen, and I have three columns.

I'll check out the HTML quickly just so we can all follow along.

I've got my header, right here.

Not much in it other than H1 and H2 element.

I have a nice little paragraph over here where I basically say, I've hard coated

these measurements, what's going to happen when I resize the screen?

And then, the last thing I have is really just a little bit of craziness.

I'm going to pull it down here.

It's just three divs, each of which has an H2 header and a paragraph.

They all say the same thing, it's just some Latin filler,

because I don't really care about the actual content itself.

More importantly, let's look over here at the CSS.

In that main section, the main content of my page I've gone in and

I've hard coded the value to 980 pixels, the margin 0 auto,

just means hey, make sure you center me, if I'm on a bigger browser.

For each column, because I'm going to have three, I set the width to 300.

Now 300, 300, 300 that's only 900 pixels.

But, because I leave some margin in-between each column,

it's important we add a little bit of extra padding there.

Everything else is fairly straightforward.

I have rules for the body and the H1 and H2.

The only other real measurements I use are the fact that I set my font size

to 13 pixel, and down here for the H1.

I've set my font size to 64 pixels.

All right, let's take a look at this page when I really bring the content up, so

it's something we can see.

Here we go.

I have it.

I have a fairly large sized screen, in fact,

if I pull it around I can usually see how big it is.

And it looks okay, but as I make the screen smaller,

you're going to see that what happens is the content is hidden.

If I scroll, I can't even scroll up and down.

I'm trying.

The only way for me to see more content is to scroll horizontally.

And we all know that I absolutely hate that.

In addition, this H1, the fluid measurement, the font is so

big that it kind of overshadows the rest of the content.

So I'm going to make this big again, and let's think about what we want to do.

One of the keys to responsive design typically is mapping out what you

want your page to look like before you code it,

and we're going to talk about that in week two.

But right here, for week one, let's just wing it a little bit.

I'm going to make it so I can see my code.

And the first thing I'm going to do is I'm going to go to the first place I

hard coded a value, which is the width of this main part.

Saying that I always want it to be 980 pixels, it's just a mistake.

Instead, let's use percent here, and say I want this to take up,

let's say somewhere between 95 and I'll pick 95% of my page.

Already, you could see that things happened in there.

Not everything we wanted to happen, but a little.

I'll resize it again.

You can see that my paragraph down here still fits, but

the columns just look at little bit awkward.

Particularly, if I'm somewhere in that awkward range of two columns fit, but

not the third.

So while the main page is responsive, let's work on those columns.

Here, I've set them to 300 pixels.

Let's change that.

Since I have three columns, again, I can set it to 33, 33, 33, but

I'm probably going to end up with some overlap.

So I'm going to make these 30%, and

I'm going to set the margin left to, we'll use 2%.

Now you can already see this is a huge difference in our page.

Whether I make it big, there's not a lot of wasted white space along the side.

And if I make it small, the columns are still together.

This is really good.

The last thing I'm going to change, I'm going to go ahead and

change my H1, so I'm using the percent instead.

We're going to make this 125%.

That's not big enough.

I'll make it 300%.

That'll be big.

Okay, I'm going to save this, I'm going to resize, and when you go in,

it no longer will be quite as dramatic over the entire page.

All right, so this is a fairly straightforward example of how we can

take absolute measurements and change them do something that's relative or

responsive to make our page a little bit better.

This is just the first step, but

it's an important step and it's something I want you to play with.

So you can feel like you're beginning to understand percents, ems, and

other things like that.

Good luck.

探索我们的目录

免费加入并获得个性化推荐、更新和优惠。

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

© 2018 Coursera Inc. 保留所有权利。

通过 App Store 下载

通过 Google Play 获取