Last post Aug 11, 2013 01:47 PM by roopeshreddy
Jul 19, 2013 03:12 PM|ReportsNerd|LINK
I recently took a course on mobile first responsive design, but it left me with a couple questions. First let me preface with I’m lost between the two worlds of using Viewport and/or Media Queries.
I was first explained the fluid design concepts using Viewport (visible area of the browser window) and how to use percentages and relative values like Ems and Rems (instead of pixel settings). The Fluid demo looked consistent across the mobile, tablet and
desktop for example when scaling out. So in the head tag of the main html page, they added the Meta tag for Viewport with some basic properties like content. Then they linked in their style sheet and tweaked it until it was fluid and consistent across different
I was then explained an adaptive design concept using Media Queries (media type screen). Included CSS3 features and touched on some HTML5. So inside the CSS, they setup sections with different pixel settings for each minimum width we wanted to target like
mobile, tablet, desktop. Other words, specific device resolution break points.
I’m working on a completely new site, so mobile first is my goal. My questions are:
Aug 11, 2013 01:47 PM|roopeshreddy|LINK
Viewport META tag is from Apple Inc., which sets the viewable are in the browser and perfectly aligns the websites in the mobile browser, where CSS Media queries is based on the different resolutions of the device, load the StyleSheets to fit the content
It's up to us to choose, which we need to use!
You can refer - jQueryMObile
Hope it helps u...