Handling device orientation

Hello Friends, 

Welcome Back to "Web Ingredients". If you guys are new to my Site please do check my previous articles as well. 

 Guys, as we all use devices like smartphone, iPad or any Tablet for browsing any web page which is kind of easy job, but what kind of script is running on background or written for handling that web page design to make it responsive throughout the devices and desktop is hidden. 

 Actually, to make that possible, most of the credit goes to CSS (cascading style sheet) for turning even a simple page into the responsive page. 
Note: "Responsive Design" means, a web page created in such a way that it will automatically adjust and let the use of web layouts, images with media queries to become flexible enough to change the layout accordingly for mobile device and desktop. 

 Today, I am going to show "How to handle web design while orientation". 
Responsive Screen with flexible Page

 For detecting the device is orientation via CSS, "Media Query" is used.
Note: "Media Query" is a CSS style technique introduced in CSS3. It uses the @media rule to include a block of CSS properties.


 I am going to explain about Media Query in my next blog article. For now let's check, how to implement it.

 For Landscape Orientation:-
OutPut:
For Portrait Orientation:-
OutPut:

So guys, as you can see, I am not only changing the Background color but also I am playing with a color attribute of H1 and P tag whiling rotating the device.

Full Code:



If you guys have any questions about any of the UI components, Please do Leave a comment below..!!

&&

If you like this article don’t forget to share it.
Till then "Happy Coding".



Comments

Post a Comment

Popular posts from this blog

Ingredients a.k.a HTML Tags

Hey there, I am back again with my new blog "Ingredient a.k.a HTML Tags". Just like without an ingredient, none of the dishes are prepared at all (except Fruit salad, as the name suggest it only require fresh fruit mostly). Anyways moving on, for now, we will catch up for delicious Food Blog Sooner. So again, as we already know that ingredient plays an important role in preparing any dishes. The same way "Tags Elements" play an important role in creating any Websites it doesn't matter what kind of WebSite you are developing. Web Technologies differ with the supportive language used for its development, few require the knowledge of OOPS Concepts (Object Oriented Programming), few require and C and C# programming knowledge and most of them are just made via "Web Frameworks" (Bootstrap, JqueryMobile, AnagularJS, ReactJS and etc) which nowadays, is more responsive enough to adjust as per the device resolution and sometimes act like a Mobile Web App...
Read more

First meeting with HTML

Image
“ Hi, there! Welcome to WebIngredients, where this dude shares every knowledge and information gathered via working on Web Technology. " Friends just like before making an awesome dish we must need to know which ingredient we shall use for it. Same way before making or creating your dream websites we should understand and learn " HTML , CSS , some scripting language with Javascript and any One Backend language such as PHP, Javascript(with the Node.js framework), Ruby, Python, Java, etc. Here we are going to highlight some of the important points related to Web Technology as well. What is HTML? HTML is the markup language for creating Web pages and can also be referred to as the Worldwide Web’s primary language. Note: HTML stands for Hyper Text Markup Language It describes the structure of Web pages Elements of HTML are actually the building blocks of HTML Web pages These elements are represented by tags So basically, these tags label the pieces o...
Read more