项目作者: jennilynhowell

项目描述 :
TIY Week 2, Day 1: Responsive CSS layouts using flexbox and media queries
高级语言: CSS
项目地址: git://github.com/jennilynhowell/2.1-responsive-layout.git
创建时间: 2017-05-30T19:30:15Z
项目社区:https://github.com/jennilynhowell/2.1-responsive-layout

开源协议:

下载


2.1-responsive-layout

TIY Week 2, Day 1: Responsive CSS layouts using flexbox and media queries

Intro to responsive layout & media queries

The downloaded zip contains two subfolders, resources and starter_files. The resources folder contains screenshots of the final website at three sizes: mobile, tablet, and desktop. The starter_files folder contains the index.html and style.css pages. Don’t edit the HTML page. You can match the mockups with nothing more than CSS, so you have no reason to edit the HTML. Because this assignment is about responsive layout, some of the more basic visual styles are already in place in the CSS document.

Your job is to finish the CSS to match the HTML page to the 3 responsive layouts.

Step 1: Review the provided layouts and compare them with the current state of the HTML page

Open mobile.png, tablet.png, and desktop.png with Preview.
Open the starter_files folder in your text editor.
Open index.html in Chrome.
Comparing the website with the layout, taking note of which styles have been applied and which have not.
Use Chrome DevTools to examine the code.
Step 2: Complete the CSS to match the appropriate layout at each breakpoint size

Add styles and media queries to the CSS to match the layout.
Use Chrome DevTools to check your refactored code against the output.