レスポンシブデザインとは、PCやスマホ、タブレットなど異なる表示環境に対応したWEBデザインのこと。

以下はスタイルシートで記述する方法。
メディアクエリー(@media)を使用します。

@media screen and (min-width: 768px) { /* 画面幅768px以上の端末において左右に余白をとる */
  .yohaku {
    margin:0px 19px;
  }
}
@media screen and (max-width: 767px) { /* 画面幅767pxまでの端末においてはそのまま表示する */
  .yohaku {
  }
}

要はひとつのスタイルシートにPCで表示した場合とモバイルで表示した場合のスタイルを2種類書き込めば良いのです。
たとえばこのきーぶろページ

PC表示ではボタンが横並びに表示されますが

 

スマホ表示だとボタンが縦並びに表示されます。

このコードは以下のとおりです。

/* 記事を投稿ボタン レッド */
@media screen and (min-width: 768px) { /* 画面幅768px以上の端末においてボタン左右に余白をとる */
.css_btn_r {
	font-size:16px;
	font-family:Arial;
	font-weight:normal;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #d83526;
	padding:9px 18px;
	margin:0px 19px; /* 画面幅768px以上の端末においてボタン左右に余白をとる */
	text-decoration:none;
	background:-moz-linear-gradient( center top, #fa665a 5%, #d34639 100% );
	background:-ms-linear-gradient( top, #fa665a 5%, #d34639 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fa665a', endColorstr='#d34639');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fa665a), color-stop(100%, #d34639) );
	background-color:#fa665a;
	color:#ffffff;
	display:inline-block;
	text-shadow:1px 1px 0px #98231a;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #fab3ad;
 	-moz-box-shadow:inset 1px 1px 0px 0px #fab3ad;
 	box-shadow:inset 1px 1px 0px 0px #fab3ad;
}.css_btn_r:hover {
	background:-moz-linear-gradient( center top, #d34639 5%, #fa665a 100% );
	background:-ms-linear-gradient( top, #d34639 5%, #fa665a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d34639', endColorstr='#fa665a');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #d34639), color-stop(100%, #fa665a) );
	background-color:#d34639;
}.css_btn_r:active {
	position:relative;
	top:1px;
}
}

@media screen and (max-width: 767px) { /* 画面幅767pxまでの端末においてはボタンをそのまま表示する */
.css_btn_r {
	font-size:16px;
	font-family:Arial;
	font-weight:normal;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #d83526;
	padding:9px 66px;
	margin:12px 0 0 0;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #fa665a 5%, #d34639 100% );
	background:-ms-linear-gradient( top, #fa665a 5%, #d34639 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fa665a', endColorstr='#d34639');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fa665a), color-stop(100%, #d34639) );
	background-color:#fa665a;
	color:#ffffff;
	display:inline-block;
	text-shadow:1px 1px 0px #98231a;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #fab3ad;
 	-moz-box-shadow:inset 1px 1px 0px 0px #fab3ad;
 	box-shadow:inset 1px 1px 0px 0px #fab3ad;
}.css_btn_r:hover {
	background:-moz-linear-gradient( center top, #d34639 5%, #fa665a 100% );
	background:-ms-linear-gradient( top, #d34639 5%, #fa665a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d34639', endColorstr='#fa665a');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #d34639), color-stop(100%, #fa665a) );
	background-color:#d34639;
}.css_btn_r:active {
	position:relative;
	top:1px;
}
}