Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Responsive browser tools
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Last example, you saw me come over here and start resizing Firefox saying, oh when I resize it like this it's probably like a phone.
0:08
If I resize it like this, it's probably you know, something else. However, we can be way more precise about that.
0:15
If we come down here to Tools, Web Developer and switch into Responsive Design Mode or hit Alt + Command + M, whatever you want.
0:24
It'll actually pull up a little, simulated phone type thing. So here, we're in iPhone 6, 7, 8. Notice it's basically how it looks on iPhone 6, 7, 8.
0:36
We navigate around, we route our courses things like that. We could also switch to, what do you want to do? Kindle Fire, something else, right?
0:44
So we could go to an iPad, here's an iPad let's switch back to the phone real quick. How's it look when you hold it sideways, for example.
0:52
You can see, well, this is how it looks when you hold it sideways. Kind of, maybe those pictures are a little bit big.
0:57
But you get that idea, this tools are really, really nice. You can even say, I would like to simulate a good 3G
1:03
or regular 3G connection as you interact with it. Okay, so, when you're thinking about playing with these grids and other responsive elements
1:10
leverage the design tools inside your browser.