css3网站响应式写法详解编程语言

css3响应式写法
因为media不支持ie9以下的浏览器 所有要加个判断

 
 <!-- 全部通用的 -->
<link rel="stylesheet" href="{$yuming}/css/common.css?v={$visition}">
 <!--[if lte IE 8]>
 <link rel="stylesheet" href="{$yuming}/css/pccommon.css?v=<?php echo time() ?>"">
 <![endif]-->
 <!-- pc -->
 <link rel="stylesheet" href="{$yuming}/css/pccommon.css" media="(min-width:1350px)">
 
 <!--ipad和手机公用的css-->
 <link rel="stylesheet" href="{$yuming}/css/mobpadcommon.css" media="(max-width:1349px)">
 
 <!-- ipad和笔记本 -->
 <link rel="stylesheet" href="{$yuming}/css/ipadcommon.css" media="(min-width:768px) and (max-width:1349px)">
 <!-- 手机/-->
 <link rel="stylesheet" href="{$yuming}/css/mobilecommon.css" media="(max-width:767px)">

PC ipad 尺寸都写死 pc中间内容1350 ipad中间内容宽度768

少用绝对定位 外围高度不要写死

手机端写 全部自适应

<strong>注意:如果碰到编辑器编辑生成内容需要自适应的时候 在移动端 图片要设置百分比 编辑图片的时候不能写宽度和高度哦居中就行 文字字体大小不用管</strong>

 文字尽量代码写 保证自适应(比方说网站是一排 手机上就2排 如果切图片就只能一排)