14 media query

19
MEDIA QUERY AMIROH, S.Kom SMKN 3 JOMBANG

Upload: amiroh-skom

Post on 09-Feb-2017

76 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: 14  media query

MEDIA QUERY

AMIROH, S.KomSMKN 3 JOMBANG

Page 2: 14  media query

Konsep Media Query Saat ini layout sebuah website telah mengalami

perkembangan dengan menyesuaikan berbagai perangkat yang digunakan untuk mengaksesnya

Misalnya, sebuah website akan menampilkan layout yang berbeda ketika diakses melalui PC desktop dengan layout ketika diakses menggunakan Tablet/HP

Page 3: 14  media query

Konsep Media Query

Konsep media query inilah yang menjadi dasar berkembangnya Responsive Website yang akhir-akhir ini banyak digunakan oleh web developer

Media query dibuat dengan menggunakan CSS3 yang memungkinkan kita untuk mengubah stylesheet berdasarkan lebar & tinggi perangkat/media yang kita digunakan, seperti PC Desktop atau Tablet atau HP

Page 4: 14  media query

CONTOH Berikut adalah contoh layout web yang

menggunakan media query:

Page 5: 14  media query

CONTOH SEDERHANABerikut adalah contoh layout web

sederhana yang memanfaatkan media query:

Background website berwarna Hijau ketika lebar screen full (1024px)

Layout 1

Page 6: 14  media query

Layout 2

Background website berwarna Merah ketika lebar screen antara 768px -

990px

Page 7: 14  media query

Layout 3 Background website berwarna Biru ketika lebar screen antara 480px –

768px

Page 8: 14  media query

Layout 4 Background website berwarna

Kuning ketika lebar screen < 480

Page 9: 14  media query

Syntax Media query dibuat dengan

menggunakan CSS3 @media dengan penulisan sebagai berikut:

@media <jenis media> and <ukuran media> {Elemen CSS}

Contoh:@media all and (min-width: 768px) and (max-width: 991px) {body {background:red;Color:yellow}}

Page 10: 14  media query

CONTOH: Layout 1

(Lebar screen > 700px)

Page 11: 14  media query

Layout 2 (Lebar screen < 700px)

Page 12: 14  media query

Project 1

Page 13: 14  media query

Ketentuan: Buatlah sebuah responsive website

dengan tampilan berikut Script dibuat menggunakan HTML5

dan CSS3 Layout website menggunakan

Layout 1 untuk lebar Screen >700px dan Layout 2 untuk lebar Screen < 700px

Gunakan external stylesheet

Page 14: 14  media query

LAYOUT WEBSITE 1. CITILINK.CO.ID

Page 15: 14  media query

PROJECT 1 Layout 1

Page 16: 14  media query

Layout 2

Ketentuan: Menggunakan HTML5 dan

CSS3 Layout website

menggunakan Layout 1 lebar Screen >700px dan Layout 2 untuk lebar Screen < 700px

Gambar logo hilang Tampilan Form melebar Tampilan menu vertical

Page 17: 14  media query

2. Layout 1 Website https://ib.bri.co.id

Page 18: 14  media query

Layout 2