html图片自适应手机屏幕大小的css写法
在html里面插入图片，让其自适应屏幕大小，可以通过css来完成，下面有个示例，希望对大家有所帮助
&复制代码代码如下: body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul { margin: 0; padding: 0 } body { min-width: 320 font-family: 'microsoft yahei',Verdana,Arial,Helvetica,sans- color: #333; -webkit-text-size-adjust: none } fieldset,img { border: 0 } ol,ul { list-style: none } address,em { font-style: normal } a { color: #000; text-decoration: none } table { border-collapse: collapse } #clear { clear: width: 100%; background-color: #fff } #clear: after { display: clear: height: 1 content: '' } img, fieldset { border: 0; } img { height: width: auto\9; width:100%; } .content-step ul li .red{ color:#e5362b; background: width: vertical-align:inherit} * { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-box-sizing: border- -moz-box-sizing: border- -ms-box-sizing: border- box-sizing: border-box } .doc { padding:10 margin: 0 } .doc h1 {font-size:16color:#333;padding:10px 0;font-weight:500;} .shop-title {padding:10px 0;} .author {padding:10px 0;font-size:12} .author span {color:#333;} .author a {color:#2B8CB2;} .content {padding:20px 0;} .f-bold {background-color:#CCC5C0;color:#E5362B;padding:5line-height:24font-size:14} .content p {line-height:24padding:10px 0;text-indent:2 font-size:14} .content-time {padding:20px 0;color:#000;font-weight:500;line-height:40} .content-time span {color:#000;} .content-time em {color:#E5362B;} .content-step {} .content-step ul {padding:20px 0;} .content-step ul li {line-height:30color:#5D5D5D; font-size:14 padding-top:0} .content-step ul li .icon{ display:inline- background:url(../images/icon.jpg) no- width:20 height:20 background-size:20px 20 vertical-align: margin-right:8} .shop-list {} .shop-list li {text-align:padding:20px 0;} .shop-list li p {text-align:color:#7A7878; text-indent:2} .shop-list li img {margin:0} .content-contact {color:#F15050;padding:20px 10line-height:30text-indent:2} .cmbc-qrcode {text-align:padding:20px 0;} .down-cmbc {text-align:display:margin:0} .down-cmbc img {margin:0} /* @media screen and (min-width: 480px) { .doc { font-size: 21px } }@media screen and (min-width: 640px) { .doc { font-size: 28px } } */ .list li{display:-moz- display:-webkit- display:} .list li p{ width:90%} .last{ text-align: font-size:12 color:# padding-right:20 margin-bottom:10} 复制代码代码如下: &!doctype html& &html& &head& &meta charset="utf-8"& &meta name="viewport" content="width=device- initial-scale=1.0"& &meta name="keywords" content="test" /& &meta name="description" content="" /& &title&test&/title& &link rel="stylesheet" type="text/css" href="style/css/mobile.css" /& &/head& &body& &div class="doc"& &h1&房屋装修&/h1& &div class="author"& &span&&/span& &/div& &div class="shop-title"& &img src="style/images/5.jpg" width="640" height="406" alt="" /& &/div& &div class="content"& &span class="f-bold"&家居体验&/span& &p& 好的家具让当代人心情愉悦，放松，好的家居设计非常重要。 &/p& &/div& &div class="content-step"&&img src="style/images/step-1.jpg" width="574" height="68" alt="" /&&/div& &div class="content-step"& &ul& &li&&span class="icon"&&/span&免预存&/li& &li&&span class="icon"&&/span&套餐7.5-8.5折优惠；&/li& &li&&span class="icon"&&/span&唯一渠道办理终端补贴合约机；&/li& &li&&span class="icon"&&/span&可为集团客户统一办理集团套餐；&/li& &/ul& &/div& &/div& &/body& &/html& 注：在html里面插入图片，如果想让图片自适应屏幕的小而不是宽高固定不变可以在css代码里加入img { height: width: auto\9; width:100%; }&
TA的最新馆藏本文简介：1、手机移动端页面的自适应2、手机触摸手动滑动效果一、header信息的设置（自适应）　　　1、声明信息 &!DOCTYPE HTML&　　　2、编码设置 &meta charset="UTF-8"&&　　　3、移动设备特别设置（重要声明！）　　　&meta content="width=device-width,user-scalable=no" name="viewport"&&Viewport说明：该设置可使我们开发出的页面/产品 大小可适应各种高端移动设备width=device-width 为设备的宽度.user-scalable=no/yes 此功能为用户调整缩放。默认为yes。一般设置为noPS:初次尝试制作移动端页面。亲们，由于我没有加上面的viewport声明，结果导致页面狼狈不堪。&二、手机触摸手动滑动效果1、触摸屏效果滚动组件（js必须包含的部分）
&!--触摸屏效果滑动组件--&
&script type="text/javascript" src="./js/touch.js"&&/script&
&script type="text/javascript" src="./js/zepto.extend.js"&&/script&
&script type="text/javascript" src="./js/zepto.ui.js"&&/script&
&script type="text/javascript" src="./js/slider.js"&&/script&
&!--触摸屏效果滑动组件end--&
本人亲测以上4个js必须包含，缺一不可。2、所要在手机端做滑动效果的部位（html代码部分）
&div class="head_nav_C" id="hongye_nav" style="height:60"&
&div style="background-color:"&
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
&div style="background-color:"&
bbbbbbbbbbbbbbbbbbbbbbbbbbb
&div style="background-color:"&
cccccccccccccccccccccccccccc
&div style="background-color:"&
ddddddddddddddddddddddddd
3、js代码块（改代码会在动在要加滑动效果的html代码块中自动生成一块代码）
Zepto(function($){//自动加载zepto组件
$("#hongye_nav").slider({//为html 对应的id部分最佳slider属性
: false, //是否自动
: true,//是否循环
4、加载slider.css样式
附：另外一种简单的写法(适用于幻灯)html代码部分&div id=&fla&&　　&img lazyload=&images/img2.jpg& /&　　&img lazyload=&images/img3.jpg& /&&/div&2、js代码部分&script&//创建slider组件$('#fla').slider();&/script&附：小知识一、字体效果color:#FFF 定义字体的颜色text-shadow:0 0 2px #146F61;(css3.0特效)CSS3.0的文字阴影 text-shadow语法：text-shadow: h-shadow v-也就是text-shadow：【x轴（x offset） y轴（Y offst） 模糊半径（Blur） 颜色（color）】例如：text-shadow: 5px 5px 5px #FF0000;二、盒子模型圆角效果border-radius 属性例子：div{border:2border-radius:25}等价于：div{border:2border-top-left-radius:2border-top-right-radius:2border-bottom-right-radius:2border-bottom-left-radius:2}
阅读(...) 评论()【 H5自适应手机界面】一个网页上的按钮怎么自适应手机屏幕大小_html5吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：82,800贴子：
【 H5自适应手机界面】一个网页上的按钮怎么自适应手机屏幕大小收藏
一个网页上的按钮怎么自适应手机屏幕大小，只要设置按钮的高度和宽度的百分比可以么？
求大神指教，新人刚学H5
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或用meta标签viewport解决手机页面缩放异常问题-html5教程-网页制作-壹聚教程网用meta标签viewport解决手机页面缩放异常问题
html5的网页在手机缩放得很小导致看不清，现在我们来用meta标签viewport解决手机页面缩放异常的问题，这样就可以看清html5的手机网页了。
用html5文档申明做的页面在PC上的效果没问题，但手机浏览器会把该网页缩放到很小，你可以看到整个网页但是看不清字了！！
只需在页面head标签内上加入meta标签 的viewport申明：
&meta name=&viewport& content=&width=device-width&&
就能帮你解决这个看似很糟糕的问题。
viewport 语法介绍：
&!-- html document --&
&meta name=&viewport&
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
width表示网页的布局layout宽度，控制 viewport 的大小，可以指定的一个值(默认单位px)或者特殊的值，如:
width=960, initial-scale=0.33（960是页面layout的宽度,这里设width意思是将其它缩小到大约1/3，这样正好可以在320像素的手机设备上看到整个网页）
width=device-width (设备的宽度,通用写法)
和width用法相同，指定高度。
target-densitydpi
一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。
下面是 target-densitydpi 属性的 取值范围
device-dpi &使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
high-dpi & 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
medium-dpi & 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density.
low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
&value& & 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70&400之间。
&!-- html document --&
&meta name=&viewport& content=&target-densitydpi=device-dpi& /&
&meta name=&viewport& content=&target-densitydpi=high-dpi& /&
&meta name=&viewport& content=&target-densitydpi=medium-dpi& /&
&meta name=&viewport& content=&target-densitydpi=low-dpi& /&
&meta name=&viewport& content=&target-densitydpi=200& /&
为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。
initial-scale
初始缩放。即页面打开时默认的初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为&1.0&，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为&2.0&，那么这个页面就会放大为2倍。
maximum-scale
最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为&2.0&，那么这个页面与target size相比，最多能放大2倍。
minimum-scale
最小缩放，用法同maximum-scale相同
user-scalable
用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。
注意：所有的缩放值都必须在0.01&10的范围之内。
另附meta标签其它常用的属性用法解析：
1、&meta name=&format-detection&/& 的用处
在手机上浏览时，该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。
在 iPhone 上默认值是：
&meta name=&format-detection& content=&telephone=yes&/&
如果你不希望手机自动将网页中的电话号码显示为拨号的超链接，那么可以这样写：
&meta name=&format-detection& content=&telephone=no&/&
2.&meta name=&apple-mobile-web-app-capable&/&的用处
&meta name=&apple-mobile-web-app-capable& content=&yes& /&
这apple-mobile-web-app-capable的作用就是删除默认的苹果工具栏和菜单栏。content有两个值&yes&和&no&,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。
3.&meta name=&apple-mobile-web-app-status-bar-style&/&的用处
作用是控制状态栏显示样式:
&meta name=&apple-mobile-web-app-status-bar-style& content=&default& /&
&meta name=&apple-mobile-web-app-status-bar-style& content=&black& /&
&meta name=&apple-mobile-web-app-status-bar-style& content=&black-translucent& /&
default:默认； black:纯黑； black-translucent：半透明灰色
上一页： &&&&&下一页：相关内容手机页面rem布局_HTML5教程_前端技术
您的位置： &
& 详细内容
手机页面设计一般的大小是640，但是，手机屏幕大小确实不确定的，这样，怎么才能做出适应所有手机的手机页面呢？
一般的解决方案有两种，rem布局和百分比布局。这两种方案我有都试过，所以现在更推荐用rem布局来制作手机页面;
rem布局的兼容性：
Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+、ie6-ie8 还是别用rem
不过现在的手机一般浏览器，一般可以直接不用去管IE内核的浏览器了。
REM的计算公式
例:html 设置font-size:16px 1rem = 16px
那么640px = 640/16 =40rem
个人建议设置为100px 方便计算
首先，给页面的html定义一个100px的
html{ font-size:100}/*设定基础rem*/
然后，最核心的代码就是这一段js运算了，根据页面的大小来控制基础rem的值；
new function (){
&& var _self =
&& _self.width = 640;//设置默认最大宽度
&& _self.fontSize = 100;//默认字体大小
&& _self.widthProportion = function(){var p = (document.body&&document.body.clientWidthdocument.getElementsByTagName(&html&)[0].offsetWidth)/_self.return p&1?1:p&0.5?0.5:p;};
&& _self.changePage = function(){
&&&&&& document.getElementsByTagName(&html&)[0].setAttribute(&style&,&font-size:&+_self.widthProportion()*_self.fontSize+&px !important&);
&& _self.changePage();
&& window.addEventListener("resize",function(){_self.changePage();},false);
&!DOCTYPE html&
&meta name=&viewport& content=&width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0&&
&meta charset=&utf-8&&
&title&rem基础布局&/title&
&script type=&text/javascript&&
new function (){
&& var _self =
&& _self.width = 640;//设置默认最大宽度
&& _self.fontSize = 100;//默认字体大小
&& _self.widthProportion = function(){var p = (document.body&&document.body.clientWidthdocument.getElementsByTagName(&html&)[0].offsetWidth)/_self.return p&1?1:p&0.5?0.5:p;};
&& _self.changePage = function(){
&&&&&& document.getElementsByTagName(&html&)[0].setAttribute(&style&,&font-size:&+_self.widthProportion()*_self.fontSize+&px !important&);
&& _self.changePage();
&& window.addEventListener("resize",function(){_self.changePage();},false);
&style type=&text/css&&
/*=== base style===*/
*{margin: 0 padding: 0}
ul{list-style:}
.wrap{min-width: 320 max-width: 640 width: 100%; margin: 0; background: #2a6 font-family:"微软雅黑", "helvetica neue",tahoma,"hiragino sans gb",stheiti,"wenquanyi micro hei",\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans- font-size: 12}/*适用于手机端：字体大小用em，1em=16px；为默认字体大小;最大宽度640*/
.pro{width:6.2 margin: 0 padding-top: 20 overflow:}
.clearfix:after {content:&&;height:0;display:clear:}
.clearfix {zoom:1;}
.pro ul{width:6.4}
.pro li{width: 3 height: 3.6 float: margin: 0 0.2rem 0.2rem 0;}
.pro li .box{width: 3 height: 3 background: #}
.pro li p{font-size: 0.24 line-height: 0.6 text-align:}
&div class=&wrap&&
&& &div class=&pro&&
&&&&& &ul class=&clearfix&&
&&&&&&&& &li& &div class=&box&&&/div& &p&区块文案&/p& &/li&
&&&&&&&& &li& &div class=&box&&&/div& &p&区块文案&/p& &/li&
&&&&&&&& &li& &div class=&box&&&/div& &p&区块文案&/p& &/li&
&&&&&&&& &li& &div class=&box&&&/div& &p&区块文案&/p& &/li&
&&&&&&&& &li& &div class=&box&&&/div& &p&区块文案&/p& &/li&
&&&&& &/ul&
( 23:06:36)
相关排行总榜