PCとモバイル端末間の適応の問題をどう解決するか? _html/css_WEB-ITnose

Web ページを作成するとき、スタイルの変更の問題を解決するには、通常、コンピューターの画面サイズと携帯電話の画面サイズの違いなどの問題を考慮する必要があります。現在、自己調整は主に高さ、幅、画像の調整の問題を解決するために使用されます。高さ、幅、画像を調整する場合、通常はページのレイアウトに関連します。 。

1. 最小サイズの解像度は 1024*768 (従来の 17 インチ モニター)、最小幅として 940px、960px、または一般的に使用される 980px を使用できます

2 1024*768 の後のわずかに大きい解像度は 1280 です。 *768 、少し大きい Web ページ幅として 1200px または 1220px を使用できます

3. css3 および html5 をサポートする高度なブラウザーは、CSS3 メディア クエリを使用して、さまざまな解像度で Web ページのレイアウト タグを自動的に調整できます

4。 css3、html5 をサポート 非常識なブラウザ、特に 6725987fac2a34589538ad3308a75909

ビューポートはWebページのデフォルトの幅と高さを意味します。デフォルトでは、Web ページはデバイスと同じになります。 画面の幅は元の拡大縮小率 1 です。つまり、Web ページの初期サイズは画面領域の 100% を占めます。

1: Web ページは画面の幅に応じてレイアウトを調整するため、絶対幅のレイアウトや絶対幅の要素を使用することはできません。これは非常に重要です。具体的には、CSS コードではピクセル幅を指定できません: width: xxx px; width: xx%; または width: auto のみを指定できます

2: 通常は em を使用し、px フォントの使用は最小限に抑えます

3: フローレイアウトを使用する

    4：自适应网页设计”的核心，就是CSS3引入的media query模块。下载地址：http://download.csdn.net/download/song_121292057/8031781

    自动探测屏幕宽度，然后加载相应的CSS文件。

    <link rel="stylesheet" type="text/css"  media="screen and (max-device-width: 400px)" href="style.css" /> <br /><br />-------当屏幕小于400时，就加载style.css这个文件

  5：除了用html标签加载CSS文件，还可以在现有CSS文件中加载。

  @import url("style2.css") screen and (max-device-width: 800px);//当小于800px屏幕时，就加载style2.css文件

  6:图片的自动缩放，比较简单。只要一行CSS代码：img{ max-width: 100%;}建议根据不同的屏幕分辨率，加载不同大小像素的图片。      

    移动端的自适应，大体上差不多就这么多，主要核心是利用mediaquery,根据不同的屏幕大小，实现不同的布局。代码可看上面的列子。这里不再重复写。

     大概总结了一下自己遇到的问题，还有什么好的方法，请给我留言哈！

     作者：向婷风

     出处：

     本文版权归作者和博客园所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面