Skip to main content

How to create a responsive font in css ( without @media )

In Responsive website design big problem to create font responsive.
Responsive Font is many way you can create it.

In this tut. I am learning create a responsive font without using @media attribute.

Now Show Example Html file is :


<html>
<head>

<title>krButani</title>
<style>
.FDemo
{
margin : 30px;

padding:20px;

font-size:5vw;
/*
offset You can set View port

the view port type is Follow :
1. vw = viewport width
2. vh = viewport height
3. vmin = relative to the shortest dimention( width or height )
4. vmax = relative to the logest dimention( width or height )

one other dimention is rem ( Re embedded )

It's all the dimension can not support internet explorer.

*/
font-family:Verdana, Arial, Helvetica, sans-serif;

background:#54A93F;
border:3px solid #fff;
box-shadow:0px 0px 3px #999;
border-radius:5px;
}
</style>
</head>

<body>
<div class="FDemo">
This Is Text Demo
</div>
</body>
</html>


Output Is :

Size of : 1024 * 768
Size of : 320 *240

Post a Comment

Popular posts from this blog

My new Jquery Plugin name is krDailog

This is my new jquery plugin i hope this is use full to you if you require this plugin than contact me

 /*
    krDailog Version 1.0
    Author: krButani
    email: butanikartik1108@gmail.com
*/


Require to use this function
    - bootstrap.css new version
    - bootstrap.js new version
    - jquery.js new version
    - jquery-ui.js new version
    - glyphicons font by bootstrap

# you can use new version of all and also use min file also

# include file first this way

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/krDailog.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <s…

Intent demo pass with text demo in Android

First Create Two acitvity layout file name firstscreen.xml second_screen.xml java filename FirstScreen.java SecondScreen.javafirstscreen.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/firstscreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.krbutani.intentpasswithdatademo.Firstscreen">

<Button
android:text="Goto Second"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignPare…