1. Trang chủ
  2. » Công Nghệ Thông Tin

jQuery & Responsive Web Design: Short guide by Dave Rupert

51 253 1

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 51
Dung lượng 8,61 MB

Nội dung

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors). A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media querie Tips to winning at responsive design - Embrace the flexible grid. - Preserve content hierarchy - Break up with pixel-perfection. - Don’t use pixels. - Use EM units for font-size. - Learn by doing.

jQuery & Responsive Web Design w/ Dave Rupert @davatron5000 #jqsummit #rwd I work at Paravel. http://paravelinc.com && @paravelinc I host the ATX Web Show. http://atxwebshow.com && @atxwebshow I make tiny jQuery plugins. < 100 lines of code each! > Stop talking about yourself. Ok! Let’s get down to business! Serious Business Meeting Agenda: • Responsive Web Design Basics • Fix Common RWD Problems w/ jQuery • Fluid Resizing of Text • Fluid Resizing of Video Embeds • Fluid Image Rotators • Questions & Answers • Pizza Party!!! YAY!!! ONLY! $18 [...]... i.e Make elements resemble a “mobile” app - Change base font-size Tips to winning at Responsive Web Design - Embrace the flexible grid - Preserve content hierarchy - Break up with pixel-perfection - Don’t use pixels - Use EM units for font-size - Learn by doing > This is all CSS What’s this have to do with jQuery? Good question! CSS gets us 100% of the way there, but > Does not compute Iron out... How FitText Works $("#my_headline").fitText(); Behind the Scenes window.resize(function(){ $(this).css( 'font-size', parent.width() / (10 * compressor) ); }); }); * code is only slightly simplified srsly The Next Day I’d pay well for a video service that made embedding fluid /responsive videos the right way... Perfect! I was going to google your blog anyways to figure it out You supply the brains and I’ll make a tiny jQuery plugin! The Problem You can try iframe {width: 100%;} You can try iframe { width: 100%; height: auto; } With FitVids How FitVids Works $(document).ready(function(){ $("#thing-with-videos").fitVids(); //... container_12 grid_4 { width: 300px; } 300px / 960px = 0.3125 x 100 target ÷ context 31.25% On the Griddle http://cssgrid.net/ “The 1140 Grid” http://goldengridsystem.com/ by @jonikorpi https://github.com/davatron5000/foldy960 http://css-tricks.com /responsive- framework.css http://csswizardry.com/fluid-grids/ http://grids.heroku.com/ Flexible Media img, video { max-width: 100%; } @media queries @media screen . jQuery & Responsive Web Design w/ Dave Rupert @davatron5000 #jqsummit #rwd I work at Paravel. http://paravelinc.com && @paravelinc I host the ATX Web Show. http://atxwebshow.com. @atxwebshow I make tiny jQuery plugins. < 100 lines of code each! > Stop talking about yourself. Ok! Let’s get down to business! Serious Business Meeting Agenda: • Responsive Web Design. elements. i.e. Make <LI> elements resemble a “mobile” app. - Change base font-size. Responsive Web Design Tips to winning at - Embrace the flexible grid. - Preserve content hierarchy - Break

Ngày đăng: 19/06/2014, 11:03

TỪ KHÓA LIÊN QUAN